js如何获取滚动条的高度

由于市面上浏览器的种类众多，但是浏览器没有一个通用的方法来获取该值，想做到每个浏览器都兼容还是要下一些功夫的。

目前主流浏览器除IE外对浏览器标准支持都比较好，例如chrome、firefox以及safari等。对应后者，可以通过window对象的pageYOffset属性来取到当前滚动条到页面顶部的高度。对于万恶的IE来说就比较麻烦一点，它依赖当前文档类型。文档类型分为Standards Mode和Quirks Mode，页面声明了DOCTYPE时为Standards Mode，反之为Quirks Mode。可以使用document.compatMode来获取，该方法也同时支持其他浏览器，其返回值为BackCompat或CSS1Compat，含义如下：

BackCompat Standards-compliant mode is not switched on. (Quirks Mode) CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

由于IE对盒模型的渲染跟文档类型有很大关系，所以获取滚动条高度的方式也是不一样的。当文档类型为Standards Mode，获取方式为：document.documentElement.scrollTop，而Quirks Mode时则为：document.body.scrollTop。

理解上面的所提到的差异后，用代码实现就很容易了，具体实现的代码如下：

function getScrollTop1() {if ('pageYOffset' in window) {return window.pageYOffset;} else if (document.compatMode === "BackCompat") {return document.body.scrollTop;} else {return document.documentElement.scrollTop;}
}

甚至可以修改上述代码，使用一行代码搞定，但是可读性没有上面好，代码如下：

function getScrollTop() {return !('pageYOffset' in window)? (document.compatMode === "BackCompat")? document.body.scrollTop: document.documentElement.scrollTop: window.pageYOffset;
}
或
function getScrollTop() {return ('pageYOffset' in window) ? window.pageYOffset: document.compatMode === "BackCompat"&& document.body.scrollTop|| document.documentElement.scrollTop ;
}

另外除了上述document.compatMode的方式来获取文档类型外，还可以使用 document.defaultView来获取。在IE 9以下的Quirks Mode中document不支持defaultView属性。参考地址：https://developer.mozilla.org/en-US/docs/DOM/document.defaultView。

js如何获取滚动条的高度相关推荐

js获取滚动条的高度
浏览器获取滚动条高度的方法浏览器 API IE6/7/8 document.documentElement.scrollTop IE9及以上 window.pageYOffset 或者 docume ...
js获取页面高度获取视口高度获取内容高度获取滚动条宽度高度
element对象的宽高属性 1. DOM树 2.document对象 3.element对象 4. 获取元素高度宽度 1. DOM树浏览器根据DOM模型,将结构化文档HTML解析成节点,DOM的最 ...
js,jq获取滚动条高度及浏览器宽高
***获取滚动条高度*** // 获取滚动条高度 console.log(window.scrollY); console.log(window.pageYOffset); console.log ...
js中获取dom元素高度
目录 1.dom元素的宽高 2.鼠标事件中的常用高度宽度: 3. 总结: 4.参考博客: 1.dom元素的宽高 javascript中获取dom元素高度和宽度的方法如下: 网页可视区域宽: docum ...
Vue中获取滚动条的高度的方法
mounted() {//可以在这里面直接进行滚动条的获取 window.addEventListener('scroll', this.handleScroll, true)} methods: { ...
js 获取滚动条的高度
function getScrollTop() {var scroll_top = 0;if (document.documentElement && document.documen ...
js原生获取html的高度,如何通过js获取Html元素的实际宽度高度
如何通过js获取Html元素的实际宽度高度发布时间:2020-04-24 15:23:24 来源:亿速云阅读:136 作者:小新今天小编给大家分享的是如何通过js获取Html元素的实际宽度高度, ...
实时获取滚动条的高度_适用于星上快速处理的雷达高度计有效波高反演技术
卫星雷达高度计的主要观测参数之一为有效波高,数据产品中其数值的确定通过波形重跟踪来实现(Retracking),波形重跟踪的实现主要通过最大似然迭代完成,其主要的反演公示为W(t) = PFS(t)* ...
js 如何获取浏览器的高度和宽度
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

js如何获取滚动条的高度

js如何获取滚动条的高度相关推荐

最新文章

热门文章