js问题，请问怎样能够得到滚动条的滑块的长度

thinkingmen 2010-08-17 11:15:13

js问题，请问怎样能够得到滚动条的滑块的长度

我在做滚动条事件，需要计算滚动条的相对距离，这需要用到滚动条滑块的长度

怎样计算

因为窗口页面载入的数据不同，滚动条滑块的大小也不同，但是总可以有方法计算出来吧

请高手赐教，我对js刚入门的，万分感谢

...全文

2612 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

thinkingmen 2010-08-17

打赏
举报

你们说的我在用
scrollHeight, scrollTop
是去滚动条的长度和当前滚动条的位置

我是想说的是，滚动条中间不都有个用鼠标可以拖动的滑块吗，那个滑块随着内容的大小而变化，怎样能够取得滑块的大小值，或者计算滑块的大小值

licip 2010-08-17

打赏
举报

document.body.scrollHeight - document.body.clientHeight;
这应该就是了吧。

yixianggao 2010-08-17

打赏
举报

scrollHeight, scrollTop, scrollWidth, scrollLeft
详见 DHTML 参考手册

Web 开发常用手册

DHTML 参考手册
http://download.csdn.net/source/308913

JScript 语言参考
http://download.csdn.net/source/308916

CCS 样式表中文手册
http://download.csdn.net/source/304124

真哥哥 2010-08-17

打赏
举报

给滚动条赋值
document.body.scrollTop=?;

imaf 2010-08-17

打赏
举报

scrollHeight 属性
例如document.body.scrollHeight;

thinkingmen 2010-08-17

打赏
举报

恩，谢谢，

yixianggao 2010-08-17

打赏
举报

[Quote=引用 7 楼 thinkingmen 的回复:]
那怎样能知道滚动条滚到最低端了，然后引发事件呢
[/Quote]

可以，IE8、FF3.6.8 测试通过

L@_@K

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

    <title> new document </title>

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

    <meta name="generator" content="editplus" />

    <meta name="author" content="yixianggao@126.com" />

    <meta name="keywords" content="" />

    <meta name="description" content="" />

</head>

<body>

<div id=oDiv style="overflow:auto; height:100px; width:250px; text-align:left; border: 1px solid red;">

    a<br />

    b<br />

    c<br />

    d<br />

    e<br />

    f<br />

    g<br />

    h<br />

    i<br />

    j<br />

    k<br />

    l<br />

</div>

<script type="text/javascript">

<!--



document.getElementById("oDiv").onscroll = function() {

    //alert();

    if ((this.scrollTop + parseInt(this.style.height, 10))==this.scrollHeight)

    {

        alert("到底啦！");

    }

};



//-->

</script>

</body>

</html>