zoukankan      html  css  js  c++  java
  • 如何定位到div滚动条的最底端

    function ScrollDiv() {    
    var ex = document.getElementById("calm");
    ex.scrollTop = ex.scrollHeight;
    }

    obj.scrollTop:滚动条距离顶部的位置
    obj.scrollHeight:流动区域的高度

    给DIV添加滚动条
    直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:
    <div style="position:absolute; height:400px; overflow:auto">
    </div>
    如果要出现水平滚动条,则: overflow-x:auto
    同理,垂直滚动条为: overflow-y:auto
    如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative
    <HTML> 
    <HEAD> 
    <TITLE>测试表格内的滚动条</TITLE> 
    </HEAD> 

    <BODY> 
    <table>
      <tr>
        <td>表格内的滚动条:</td>
        <td>
          <div id="wins" 
            style="position:absolute;height:200;200;overflow:auto;background:#EEEEEE;"> 
            <p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p> 
            <p>pppppppppppppppppppppppppppppppppppppppppppppppppp </p> 
            <p>ppppppppppppppppppppppppp </p> 
            <p>ppppppppppppppppppppppppp </p> 
            <p>ppppppppppppppppppppppppp </p> 
            <p>ppppppppppppppppppppppppp </p> 
            <p>ppppppppppppppppppppppppp </p> 
            <p>ppppppppppppppppppppppppp </p> 
            <p>ppppppppppppppppppppppppp </p> 
            <p>ppppppppppppppppppppppppp </p> 
            <p>ppppppppppppppppppppppppp </p> 
            <p>ppppppppppppppppppppppppp </p> 
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="2" align="right">
          <span onmouseover='scrollb=setInterval("wins.scrollLeft-=10",100)' 
                     onmouseout=clearInterval(scrollb)>向左</span> 
                <span onmouseover='scrollb=setInterval("wins.scrollTop-=10",100)' 
                            onmouseout=clearInterval(scrollb)>向上</span>
          <span onmouseover='scrollb=setInterval("wins.scrollLeft+=10",100)' 
                     onmouseout=clearInterval(scrollb)>向右</span>
          <span onmouseover='scrollb=setInterval("wins.scrollTop+=10",100)' 
                     onmouseout=clearInterval(scrollb)>向下</span>
        </td>
      </tr>
    </table>
    </BODY> 
    </HTML>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>JS控制DIV滚动条</title>

    </head>

    <script>

    function scrollup()

    {

    document.getElementById('div1').scrollTop = document.getElementById('div1').scrollTop-25;

    }

    function scrolldown()

    {

    document.getElementById('div1').scrollTop = document.getElementById('div1').scrollTop+25;

    }

    function scrolltop()

    {

    document.getElementById('div1').scrollTop = 0;

    }

    function scrollbottom()

    {

    document.getElementById('div1').scrollTop = document.getElementById('div1').scrollHeight;

    }

    </script>

    <style>

    .div1

    {

    height:200px;

    overflow-y:scroll;

    400px;

    border:solid 1px #ccc;

    }

    </style>

    <body>

    <div class="div1" id="div1"><br />

    start<br />

    <br /><br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    middle<br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    end<br />

    </div>

    <input name="" type="button"  value="向上"/ onclick="scrollup();">

    <input name="" type="button"  value="向下" onclick="scrolldown();"/>

    <input name="" type="button"  value="顶"/ onclick="scrolltop();">

    <input name="" type="button"  value="底" onclick="scrollbottom();"/>

    </body>

    </html>

  • 相关阅读:
    2017.0321.数字电路与系统-触发器
    2017.0320.数字电路与系统-触发器
    2017.0319.数字电路与系统-算术逻辑单元
    2017.0317.数字电路与系统-减法器
    2017.0316.算术运算电路和ALU
    2017.0315.数字电路与系统-奇偶校验器
    2017.0313.数字电路与系统-数据选择器分配器的理解
    2017.0311.数字电路与系统-数据选择器分配器的理解
    2017.0310.数字电路与系统-数据选择器分配器的理解
    2017.0309.数字电路与系统-组合电路的模块分析
  • 原文地址:https://www.cnblogs.com/andydao/p/3333500.html
Copyright © 2011-2022 走看看