夏日博客

A-A+

将滚动条（scrollbar）保持在最底部的方法

2016年02月21日 前端设计 评论 1 条 阅读 6 views 次

方法其实简单就是请点击“插入一行”按钮,插入最新信息,当出现滚动条时,滚动条将自动保持在底部了,代码如下:

  1. <script type="text/javascript">    
  2. function add()   
  3. {   
  4.     var now = new Date();   
  5.      
  6.     var div = document.getElementById('scrolldIV');   
  7.      
  8.     div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';   
  9.      
  10.     div.scrollTop = div.scrollHeight;   
  11. }   
  12.      
  13. function scrollWindow()   
  14. {   
  15.     scroll(0, 100000);   
  16.     setTimeout('scrollWindow()', 200);   
  17. }  
  18. window.onload = function() { scrollWindow(); }   
  19. </script>  

div代码如下:

  1. <div id="scrolldIV" style="overflow:scroll; height: 100px; width: 400px; border: 1px solid #999;">   
  2. </div>  
  3. <input type="button" value="插入一行" onclick="add();">  

function add() 是在 id 为 scrolldIV 的 div 中插入一条信息，并将其滚动条固定在底部

function scrollWindow() 是将整个页面的滚动条固定在页面底部。

标签：

1 条留言  访客：1 条  博主：0 条

  1. boke112导航 2016年02月21日 下午 9:12  -199楼  回复

    看起来挺简单的，不过感觉自己用不到这个东西

给我留言