定义和用法
pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。
这些属性是只读的。
语法
window.pageXOffset
window.pageYOffset所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。
注意：
IE 8 及 更早 IE 版本不支持该属性,但可以使用 document.documentElement.scrollLeft 和 document.documentElement.scrollTop 属性 。
实例
DEMO1：垂直和水平滚动 100 个像素的内容，并弹出 pageXOffset 和 pageYOffset。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
<style>
div {
border: 1px solid black;
background-color: lightblue;
height: 2000px;
width: 2000px;
}
</style>
</head>
<body>
<p>点击按钮将文档窗口在水平和垂直方向各滚动 100px 。</p>
<p><strong>注意:</strong>IE8 及其更早版本支不支持 pageXOffset 和 pageYOffset 属性。</p>
<button onclick="myFunction()" style="position:fixed;">点我滚动</button><br><br>
<div>
</div>
<script>
function myFunction() {
window.scrollBy(100, 100);
alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);
}
</script>
</body>
</html>DEMO2：兼容方案 (在 IE8 其更早版本中使用 scrollLeft 和 scrollTop)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
<style>
div {
border: 1px solid black;
background-color: lightblue;
height: 2000px;
width: 2000px;
}
</style>
</head>
<body>
<p>点击按钮将文档窗口在水平和垂直方向各滚动 100px 。</p>
<button onclick="myFunction()" style="position:fixed;">点我滚动</button><br><br>
<div>
</div>
<script>
function myFunction() {
window.scrollBy(100, 100);
if (window.pageXOffset !== undefined) { // 所有浏览器，除了 IE9 及更早版本
alert("水平滚动: " + window.pageXOffset
+ ", 垂直滚动: " + window.pageYOffset);
} else { // IE9 及更早版本
alert("水平滚动: " + document.documentElement.scrollLeft
+ ", 垂直滚动: " + document.documentElement.scrollTop);
}
}
</script>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/javascriptbook/brtips/3641.html
支付宝 
微信 