Window pageXOffset 与 pageYOffset 属性

实例

将内容滚动 100 像素，并弹出 pageXOffset 和 pageYOffset :

<!DOCTYPE html>
<html>
<head>
<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>

运行一下

定义与用法

pageXOffset 和 pageYOffset 属性返回当前文档从窗口左上角水平和垂直滚动的像素。

pageXOffset 和 pageYOffset 属性等于 scrollX 和 scrollY 属性。

这些属性是只读的。

浏览器支持

表中的数字指定完全支持该特性的第一个浏览器版本。

属性
pageXOffset	Yes	9.0	Yes	Yes	Yes
pageYOffset	Yes	9.0	Yes	Yes	Yes

注意：对于 IE8 和更早版本，您可以使用 "document.documentElement.scrollLeft" 和 "document.documentElement.scrollTop" 。

语法

window.pageXOffsetwindow.pageYOffset

技术细节

返回值:	一个数字，表示文档已从窗口左上角水平和垂直滚动的像素数

更多实例

实例

跨浏览器解决方案（对于 IE8 及更早版本，使用 scrollLeft 和 scrollTop）:

<!DOCTYPE html>
<html>
<head>
<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("Horizontal scroll: " + window.pageXOffset
    + ", Vertical scroll: " + window.pageYOffset);
  } else {   // IE9 and earlier
    alert("Horizontal scroll: " + document.documentElement.scrollLeft
    + ", Vertical scroll: " + document.documentElement.scrollTop);
  }
}
</script>
</body>
</html>

运行一下

实例

创建一个粘性导航栏:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  font-size: 28px;
}
.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}
#navbar {
  overflow: hidden;
  background-color: #333;
}
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
#navbar a:hover {
  background-color: #ddd;
  color: black;
}
#navbar a.active {
  background-color: #4CAF50;
  color: white;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sticky + .content {
  padding-top: 60px;
}
</style>
</head>
<body onscroll="myFunction()">
<div class="header">
  <h2>向下滚动</h2>
  <p>向下滚动以查看粘性效果。</p>
</div>
<div id="navbar">
  <a class="active" href="javascript:void(0)">首页</a>
  <a href="javascript:void(0)">新闻</a>
  <a href="javascript:void(0)">联系方式</a>
</div>
<div class="content">
  <h3>粘性导航示例</h3>
  <p>当您到达滚动位置时，导航栏将粘在顶部。</p>
  <p>武汉，简称“汉”，别称江城，是湖北省省会，中部六省唯一的副省级市，特大城市，中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽，联勤保障部队机关驻地。截至2020年末，全市下辖13个区，总面积8569.15平方千米，常住人口1232.65万人（第七次全国人口普查），地区生产总值1.56万亿元。</p>
  <p>武汉地处江汉平原东部、长江中游，长江及其最大支流汉江在城中交汇，形成武汉三镇（武昌、汉口、汉阳）隔江鼎立的格局，市内江河纵横、湖港交织，水域面积占全市总面积四分之一。作为中国经济地理中心，武汉有“九省通衢”之称，是中国内陆最大的水陆空交通枢纽和长江中游航运中心，其高铁网辐射大半个中国，是华中地区唯一可直航全球五大洲的城市。</p>
  <p>武汉是长江经济带核心城市、中部崛起战略支点、全面创新改革试验区，是全国三大智力密集区之一，中国光谷致力打造有全球影响力的创新创业中心。根据国家发改委要求，武汉正加快建成以全国经济中心、高水平科技创新中心、商贸物流中心和国际交往中心四大功能为支撑的国家中心城市。</p>
  <p>武汉是国家历史文化名城，楚文化的重要发祥地，境内盘龙城遗址有3500年历史。春秋战国以来，武汉一直是中国南方的军事和商业重镇，明清时期成为“楚中第一繁盛处”、天下四聚之一。清末汉口开埠和洋务运动开启武汉现代化进程，使其成为近代中国重要的经济中心，被誉为“东方芝加哥”。武汉是辛亥革命首义之地，近代史上数度成为全国政治、军事、文化中心。</p>
  <p>武汉地方建制始于西汉，为江夏郡沙羡县地。东汉末年，在今汉阳先后兴建却月城和鲁山城，在今武昌蛇山兴建夏口城。时荆州牧刘表派黄祖为江夏太守，将郡治设在位于今汉阳龟山的“却月城”中，“却月城”遂成为武汉市区内已知的最早城堡。吴黄武二年（223年），东吴孙权在武昌蛇山修筑夏口城，同时在城内的黄鹄矶上修筑瞭望塔，取名黄鹤楼。南朝时，夏口扩建为郢州，成为郢州的治所。</p>
</div>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
  navbar.classList.add("sticky")
  } else {
  navbar.classList.remove("sticky");
  }
}
</script>
</body>
</html>

运行一下

Window pageXOffset 与 pageYOffset 属性

实例

定义与用法

浏览器支持

语法

技术细节

更多实例

实例

实例

分类导航