<!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 属性 。