js获取滚动条的高度

简介:

 浏览器获取滚动条高度的方法

浏览器 API
IE6/7/8 document.documentElement.scrollTop
IE9及以上 window.pageYOffset 或者 document.documentElement.scrollTop
Safari window.pageYOffset或者document.body.scrollTop
Firefox window.pageYOffset 或者 document.documentElement.scrollTop
Chrome document.documentElement.scrollTop

备注

  • 很多技术博客上面说Chrome只能使用document.body.scrollTop来获取滚动条的高度。
  • 但是我在测试的时候发现,Chrome不能使用document.body.scrollTop,只能使用document.documentElement.scrollTop来获取滚动条的高度。
  • 如果使用document.body.scrollTop,那么所获得的数值始终是0。
  • 不过大家不用国语在意这一点,我们直接封装一个函数来获取滚动条的高度即可。

 封装获取滚动条高度的函数

function getScrollTop() {
    var scroll_top = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scroll_top = document.documentElement.scrollTop;
    }
    else if (document.body) {
        scroll_top = document.body.scrollTop;
    }
    return scroll_top;
}
相关文章
|
4月前
|
JavaScript
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
75 7
|
6月前
|
移动开发 JavaScript 前端开发
分享33个JS滚动条特效&47个JS瀑布流特效,总有一款适合您
分享33个JS滚动条特效&47个JS瀑布流特效,总有一款适合您
70 0
|
6月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
|
JavaScript
计算滚动条的宽度--js
计算滚动条的宽度--js
60 0
|
JavaScript
js判断滚动条是否到底部demo效果示例(整理)
js判断滚动条是否到底部demo效果示例(整理)
|
JavaScript
JS 监听滚动条事件
JS 监听滚动条事件
|
JavaScript
js让滚动条滚到底部
js让滚动条滚到底部
206 0
|
前端开发 JavaScript API
JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条
JavaScript 基于offsetHeight和clientHeight判断是否出现滚动条
102 0
|
JavaScript
js检测滚动条到底部
js检测滚动条到底部
88 0
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...