11.聊天记录(滑动到底部)

元素需要设置固定高度(可以获取浏览器高度)和overflow-y (规定是否对内容的上/下边缘进行裁剪 )

// 获取屏幕高度
getHight() {
     const h = document.documentElement.clientHeight;
     this.screeHeight = h;
}

html:

<div class="box" style="width:500px;height:100px; border:1px solid black;overflow-x: hidden;overflow-y: auto;margin:50px auto 0;padding: 3px;"></div>
<button onclick="add()" style="display:block;width:100px;height:20px;margin:20px auto;">添加</button>

js

<script>
       function add(){
           var div = document.getElementsByClassName('box')[0];
           var time = new Date().getTime();
           div.innerHTML += `<div>当前时间：${time}</div>`;
           div.scrollTop = div.scrollHeight;
       }
</script>