讓DIV中的垂直滾動條自動滾到最底部
阿新 • • 發佈：2019-02-09
在聊天視窗中當訊息增多超過訊息窗體DIV的高度時就會出現滾動條，但此時滾動條在絕大多數瀏覽器中都始終位於DIV的頂部，這樣就會導致之後的訊息看不見，必須往下拖動滾動條才能看到新的訊息，如果做到當出現滾動條時，滾動條始終位於DIV的底部呢？
方式一：設定DIV的scrollTop=scrollHeight;
方式二：在DIV的底部新增一隱藏元素element，然後呼叫element.scrollIntoView()。這裡的scrollIntoView是原生的方法，通過名稱我們就不難發現該方法用來使元素滾動到可視區域。
為了簡單起見直接將兩種方式放在一起。
<html><head
<style type="text/css">
div{margin:0px;padding:0px;}
#main{width:380px;height:102px;overflow-y:auto;border:1px solid #ddd;padding:0 10px 0 10px;}
#content{width:350px;line-height:20px;}</style>
<script type="text/javascript">
window.onload=function(){
var i=1;
var hid=document.getElementById(
btn.onclick=function(){
cont.innerHTML+='訊息內容'+i+'<br/>';
//hid.scrollIntoView(false);//方式1通過呼叫隱藏元素的scrollIntoView()方法使其可見
}
}
</script>
</head>
<body>
<div id="main">
<div id="content"></div>
<span id="msg_end" style="overflow:hidden"></span>
</div>
<input type="button" id="btnSend" value="新增"/>
</body>
</html>
效果如下，滾動條始終最底部
