您的位置:首页 > Web前端 > JavaScript

JS 窗口滚动条理解

2016-07-28 10:24 260 查看
首先    window.innerHeight  表示浏览器可见或可用高度

如果body中的元素总高度超越上面的高度,默认body会出现滚动条 

那么 document.body.scrollHeight  就表示 所有元素总高度     它当然大于 window.innerHeight

还有 document.body.scrollTop 就表示 当前页面相对于总高度的位置,有的文档也说它是滚动条的位置。

上面的话还有点抽象,下面用数据表示

假设 window.innerHeight  窗口可见高度为 600px

document.body.scrollHeight  所有元素总高度为900px 

那么 就会出现滚动条

document.body.scrollTop  的范围 为 0 - 300

当滚动条位于 最顶端 未滑动时 document.body.scrollTop 的值为 0 

当滚动条位于 最底端时 document.body.scrollTop 的值为 300 

完美!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript