如何定位到div滚动条的最底端

最新推荐文章于 2024-03-04 14:32:16 发布

weixin_30810583

最新推荐文章于 2024-03-04 14:32:16 发布

阅读量446

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/andydao/p/3333500.html

版权

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;width: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 οnmοuseοver='scrollb=setInterval("wins.scrollLeft-=10",100)'
                 οnmοuseοut=clearInterval(scrollb)>向左 </span>
            <span οnmοuseοver='scrollb=setInterval("wins.scrollTop-=10",100)'
                        οnmοuseοut=clearInterval(scrollb)>向上 </span>
      <span οnmοuseοver='scrollb=setInterval("wins.scrollLeft+=10",100)'
                 οnmοuseοut=clearInterval(scrollb)>向右 </span>
      <span οnmοuseοver='scrollb=setInterval("wins.scrollTop+=10",100)'
                 οnmοuseοut=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">

<head>

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

</head>

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;

width:400px;

border:solid 1px #ccc;

}

</style>

<body>

start<br />

<br />

middle<br />

<br />

end<br />

</div>

</body>

</html>

转载于:https://www.cnblogs.com/andydao/p/3333500.html

weixin_30810583

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何定位到div滚动条的最底端

function ScrollDiv() { var ex = document.getElementById("calm"); ex.scrollTop = ex.scrollHeight; }obj.scrollTop：滚动条距离顶部的位置 obj.scrollHeight：流动区域的高度给DIV添加滚动条直接为div指定overflo...
复制链接

扫一扫