IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    让DIV的滚动条自动滚动到最底部

    usity发表于 2016-04-26 01:39:49
    love 0

    1

    首先,DIV滚动条设置:css height:固定值,overflow:auto 即可。

    然后提供三种控制DIV内容滚动的方法: 

    方法一: 
    使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置 
    <script language="javascript1.2" type="text/javascript"> 
    function onGetMessage(context)   
    { 
               msg.innerHTML+=context; 
               msg_end.click();   
    }   
    </script> 
    <div style="width:500px;overflow:auto"> 
        <div id="msg" style="overflow:hidden;width:480px;"></div> 
        <div><a id="msg_end" name="1" href="#1">&nbsp</a></div> 
    </div> 
    方法二: 
    利用DIV的scrollIntoView方法,将最底端滚动到可视位置 [list=1]<script 
    language="javascript1.2" 
    type="text/javascript"> 
    function onGetMessage(context)   
    { 
               msg.innerHTML+=context; 
               msg_end.scrollIntoView();   
    }   
    </script> 
    <div style="width:500px;overflow:auto"> 
       <div id="msg" style="overflow:hidden;width:480px;"></div> 
       <div id="msg_end" style="height:0px; overflow:hidden"></div> 
    </div> 
    方法三: 
    这个比较复杂也比较灵活一点,就是利用DIV+JS+图片构造一个滚动条,当然了图片是怎么好看怎么用了。 
    主要部分就是外层的DIV加个overflow:hidden属性,通过js代码调整内层DIV的margin-left和margin-top来控制内容的滚动,由于上面两种方法已经可以满足需求,所以这种方法没具体做深究,有兴趣的可以试一下 

    freedom831215: 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    <title></title> 
    <script type="text/javascript" language="javascript"> 
    var text=""; 
    function f() 
    { 
    var div11=document.getElementById("div1"); 
    if(text!=div11.innerHTML) 
    { 
      text=div11.innerHTML; 
      div11.scrollTop=div11.scrollHeight; 
    } 
    setTimeout("f()",0); 
    } 
    function f1() 
    { 
    var div11=document.getElementById("div1"); 
    div11.innerHTML+="abc<br>"; 
    } 
    </script> 
    </head> 
    <body bgColor="#FFFFFF" onload="f()" > 
    <div id="div1" style="overflow:auto;width:300px;height:160px;"> 
      aaaaa<br> 
      aaaaa<br> 
      aaaaa<br> 
      aaaaa<br> 
      aaaaa<br> 
      aaaaa<br> 
      aaaaa<br> 
      aaaaa<br> 
      aaaaa<br> 
    </div> 
    <input id="Button2" type="button" value="button"  onclick="f1()"/> 
    </body> 

    </html>



沪ICP备19023445号-2号
友情链接