css

自定义滚动条样式

点击查看代码

.container {
  max-height: 200px;
  overflow-y: scroll;
}
.container::-webkit-scrollbar {
  width: 0.5em;
  background-color: white;
}
.container::-webkit-scrollbar-thumb {
   border-radius: 0.25em;
   background-color: red;
}
<div class="container">
  <div>12122121</div><div>12122121</div><div>12122121</div><div>12122121</div>
  <div>12122121</div><div>12122121</div><div>12122121</div><div>12122121</div>
  <div>12122121</div><div>12122121</div><div>12122121</div><div>12122121</div>
</div>

随着数据加载滚动条自动滚动到底部

 this.changeCheck.detectChanges();//先渲染数据
let scorll = document.getElementById('t2-container');//t2-container为限制max-height的滚动区域窗口
scorll.scrollTop = scorll.scrollHeight; //自动滚动到底部