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
完美!
如果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
完美!
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子