files/zh-cn/web/api/window/scrolly/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

---
title: Window.scrollY
slug: Web/API/Window/scrollY
tags:
  - API
  - Reference
  - 参考
  - 属性
translation_of: Web/API/Window/scrollY
---
<div>{{APIRef}}</div>

<h2 id="Summary" name="Summary">概述</h2>

<p>返回文档在垂直方向已滚动的像素值。</p>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="syntaxbox">var y = window.scrollY;</pre>

<ul>
 <li><code>y</code> 是文档从顶部开始滚动过的像素值。</li>
</ul>

<h2 id="Example" name="Example">示例</h2>

<pre class="brush:js">// 保证刚好滚动到第二页
if (window.scrollY) {
  window.scroll(0, 0);  // 重置滚动位置为文档的左上角
}

window.scrollByPages(1);</pre>

<h2 id="Notes" name="Notes">备注</h2>

<p>如果正在使用相对滚动函数，如 {{domxref("window.scrollBy")}}、{{domxref("window.scrollByLines")}} 或 {{domxref("window.scrollByPages")}}，则需要使用该属性来检测文档是否已被滚动了某段距离。</p>

<p><code>pageYOffset</code> 属性是 <code>scrollY</code> 属性的别名：</p>

<pre>window.pageYOffset == window.scrollY; // 总是返回 true</pre>

<p>为了跨浏览器兼容，请使用 <code>window.pageYOffset</code> 代替 <code>window.scrollY</code>。另外，旧版本IE（&lt;9）两个属性都不支持，必须使用其他的非标准属性。完整的兼容性代码如下：</p>

<pre class="brush: js">var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;</pre>

<h2 id="Specification" name="Specification">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td>
   <td>{{ Spec2('CSSOM View') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<div id="compat-desktop">
<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Microsoft Edge</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also" name="See_also">相关链接</h2>

<ul>
 <li>{{domxref("window.scrollX")}}</li>
</ul>