js计算滚动条长度&位置,用于自己绘制滚动条

来源:互联网 发布:淘宝店铺分享链接生成 编辑:程序博客网 时间:2024/06/18 07:12

做页面时,经常会遇到的一个问题:一个元素设置为overflow:scroll,内部有滚动条,在元素内部滚动滚轮,当其滚动条到底时,整个页面的滚动也开始了。

有时我们只希望滚动在子元素中有效,整个页面不要动。经常会用到$("body").css("overflow","hidden"),这个样式生效后,页面确实暂时不能滚动了,但是滚动条也消失了。不光看起来不舒服,页面的宽度还会变化。

解决这个问题的一个方法是,自己绘制一个滚动条,填充在原来的位置。这里的难点在于获取滚动条滑块的长度和位置。有一种方式可以近似地计算这两个值。虽然不十分准确,看起来也差不多了。

长度: 

$(window).height()/document.body.clientHeight*$(window).height()

高度:

document.body.scrollTop/document.body.clientHeight*$(window).height()

注意,在IE中不一定有效。

原创粉丝点击