滾動條一直置於頁面底部,開發聊天程式須知。
阿新 • • 發佈：2021-06-03
有些時候（如開發聊天程式），我們需要將將滾動條（scrollbar）保持在最底部，比如聊天視窗，最新發出和收到的資訊要顯示在最下方，如果要看到最下方的內容，就必須保證滾動條保持在最底部。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<metaname="keywords"content="滾動條,scrollbar,頁面底部,聊天視窗,"/>
<metaname="description"content="有些時候（如開發聊天程式），我們需要將將滾動條（scrollbar）保持在最底部，比如聊天視窗，最新發出和收到的資訊要顯示在最下方，如果要看到最下方的內容，就必須保證滾動條保持在最底部。"/>
<title>將滾動條（scrollbar）保持在最底部的方法-滾動條,scrollbar,頁面底部,聊天視窗,</title>
</head>
<body>
<divid="example">
<h3id="example_title">將滾動條（scrollbar）保持在最底部的方法</h3>
<divid="example_main">
<!--*************************************例項程式碼開始*************************************-->
<scripttype="text/javascript">
functionadd()
{
varnow=newDate();
vardiv=document.getElementById('scrolldIV');
div.innerHTML=div.innerHTML+'time_'+now.getTime()+'<br/>';
div.scrollTop=div.scrollHeight;
}
</script>
<spanclass="notice">請點選“插入一行”按鈕，插入最新資訊，當出現滾動條時，滾動條將自動保持在底部。</span><br/>
<divid="scrolldIV"style="overflow:auto;height:100px;width:400px;border:1pxsolid#999;">
</div>
<inputtype="button"value="插入一行"onclick="add();">
<!--*************************************例項程式碼結束*************************************-->
</div>
</div>
</body>
</html> 只要加入一段程式碼：
div.scrollTop=div.scrollHeight;就能解決問題了
轉載於:https://my.oschina.net/leipeng/blog/194533