js将滚动条scrollbar保持在最底部

js实现将div等滚动条(scrollbar)保持在最底部的方法.

很多时候我们要让程序的滚动条保持在底部,如聊天室.

下面将利用div+css+javascript实现保持滚动条在最底部.

代码如下,

 

[html]

  1. <style type=“text/css”>  
  2. .cdiv{  
  3.     background-color: white;  
  4.     height: 100px;  
  5.     width: 380px;  
  6.     padding-left: 0;  
  7.     overflow-y: scroll;  
  8.     position: relative;  
  9.     word-wrap: break-word;  
  10.     overflow-x: auto;  
  11.     text-align:left;  
  12.     }              
  13. </style>  
  14. <div id=“divmsg” class=“cdiv”></div>  
  15. <input id=“test” type=“button” value=“测试” />  
  16. <script type=“text/javascript”>  
  17.     var test = document.getElementById(“test”);  
  18.     var div = document.getElementById(“divmsg”);  
  19.     test.onclick = function () {  
  20.         div.innerHTML = div.innerHTML+”js实现将div等滚动条(scrollbar)保持在最底部<br/><br/>“;  
  21. <pre code_snippet_id=“270108” snippet_file_name=“blog_20140402_1_6277634” name=“code” class=“html”>        boxScroll(div);  
  22.     }  
  23. </pre> function boxScroll(o){<br>  
  24.      o.scrollTop = o.scrollHeight;<br>  
  25. }<br>  
  26. </script>  
  27. <pre></pre>  
  28. <br>  
  29. <br>  

标签

发表评论

评论已关闭。

评论列表(1)

  • Telntt

    2014.4.4 22:04

    😛 来逛逛!