如何定位到div滚动条的最底端-白红宇

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

阅读量：5165 次

发布时间：2019-06-13

本文共 2938 字，大约阅读时间需要 9 分钟。

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

>表格内的滚动条:

</td>

<div id="wins"

style="position:absolute;height:200;width:200;overflow:auto;background:#EEEEEE;">

>pppppppppppppppppppppppppppppppppppppppppppppppppp

</p>

>pppppppppppppppppppppppppppppppppppppppppppppppppp

</p>

>ppppppppppppppppppppppppp

</p>

>ppppppppppppppppppppppppp

</p>

>ppppppppppppppppppppppppp

</p>

>ppppppppppppppppppppppppp

</p>

>ppppppppppppppppppppppppp

</p>

>ppppppppppppppppppppppppp

</p>

>ppppppppppppppppppppppppp

</p>

>ppppppppppppppppppppppppp

</p>

>ppppppppppppppppppppppppp

</p>

>ppppppppppppppppppppppppp

</p>

</div>

</td>

</tr>

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" "">

<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

你可能感兴趣的文章

执行gem install dryrun错误

转载：《TypeScript 中文入门教程》 5、命名空间和模块

jQuery - 控制元素显示、隐藏、切换、滑动的方法

查看>>

postgresql学习文档

查看>>

Struts2返回JSON数据的具体应用范例