js兼容写法为document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop（代码实例）
程序员文章站
2023-11-23 15:21:40
js兼容写法为document.documentelement.scrolltop||window.pageyoffset||document.body.scrolltop（代码实...
js兼容写法为document.documentelement.scrolltop||window.pageyoffset||document.body.scrolltop（代码实例）
<!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>
<p style="width: 2000px;height: 3000px;background-color: #ccc;"></p>
<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.onkeydown= 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>