js兼容写法为document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

最新推荐文章于 2022-08-05 10:33:49 发布

zgjx2019

最新推荐文章于 2022-08-05 10:33:49 发布

阅读量4.8k

点赞数 2

分类专栏： JS

本文链接：https://blog.csdn.net/zgjxyszh/article/details/79535086

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>js兼容写法为var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;</title>
	<meta charset="utf-8">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>   
</head>
<body>
<div style="width: 2000px;height: 3000px;background-color: #ccc;"></div>
<p id="demo"></p>
<input style="position: fixed;top: 100px;right: 100px;width: 60px;height: 20px;background-color: #666; line-height: 20px;text-align: center;" />
<script>
var ip = document.getElementsByTagName("input")[0];
ip.onclick = function(){
	alert($(window).scrollTop()); //是网页被卷去的高度
	alert(document.documentElement.scrollTop); //是网页被卷去的高度，具有DTD的情况下可以取的高度，否则为0
	alert(document.body.scrollTop); //是网页被卷去的高度，具有DTD的情况下取不到的高度0，在没有DTD的状况下取得高度
	//兼容写法为var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
	alert(document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop);
}
ip.οnkeydοwn= function(){
	//兼容写法为var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
	alert(document.documentElement.scrollTop);
	alert(window.pageYOffset); //safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；
	alert(document.body.scrollTop);
	alert(document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop);
}

ip.onmouseover = function() {
    window.scrollBy(100, 100);//每次滚动100,100

    if (window.pageXOffset !== undefined) {  // 所有浏览器，除了 IE9 及更早版本
        alert("水平滚动: " + window.pageXOffset 
        + ", 垂直滚动: " + window.pageYOffset);
    } else {   // IE9 及更早版本
        alert("水平滚动: " + document.documentElement.scrollLeft 
        + ", 垂直滚动: " + document.documentElement.scrollTop);
    }
}
alert(  0 || undefined ); // undefined
//  0 || undefined>>>undefined
//  10 || undefined>>>10
alert(  undefined || 0 ); // 0
//  undefined || 0 >>>0
alert(  undefined || 10 ); // 10
//  undefined || 10 >>>10
</script>

</body>
</html>

所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。IE 8 及更早 IE 版本不支持该属性,但可以使用 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 属性。

zgjx2019

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js兼容写法为document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;js兼容写法为var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;&lt;/title&gt; &lt;meta charse...
复制链接

扫一扫