blocks|key|4689741|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4689742|window.pageYOffset+%7C%7C+document.documentElement.scrollTop|code-block|syntax|javascript|4689743|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this

<pre><code>window.pageYOffset || document.documentElement.scrollTop
</code></pre>

blocks|key|4689775|text|获取卷轴的基于标准的方法是window.scrollY。Chrome、Firefox、Opera、Safari和IE+Edge或更高版本都支持此功能。如果你只支持这些浏览器，你应该使用这个属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4689776|IE+>=+9支持类似的属性window.pageYOffset，出于兼容性的考虑，它在最近的浏览器中返回与window.scrollY相同的属性，尽管它可能会在某些时候被弃用。|4689777|使用document.documentElement.scrollTop或document.body.scrollTop的问题是滚动不需要在这两者中的任何一个上定义。例如，Chrome和Safari在<body>元素上定义滚动，而Firefox在document.documentElement返回的<html>元素上定义滚动。这不是标准化的，可能会在浏览器的未来版本中发生变化。但是，如果scrollY或pageYOffset不存在，这是获取滚动的唯一方法。|4689778|TL;DR：|4689779|window.scrollY+%7C%7C+window.pageYOffset+%7C%7C+document.body.scrollTop+%2B+(document.documentElement+&&+document.documentElement.scrollTop+%7C%7C+0)|4689780|entityMap|0|LINK|mutability|MUTABLE|url|https://drafts.csswg.org/cssom-view/#dom-window-scrolly^0|D|E|D|E|0|0|E|I|1I|E|0|2|Y|11|N|2S|6|3F|O|46|6|5F|7|5N|B|0|0|0|3R|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1L|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

The standards-based way of getting the scroll is <a href="https://drafts.csswg.org/cssom-view/#dom-window-scrolly"><code>window.scrollY</code></a>. This is supported by Chrome, Firefox, Opera, Safari and IE Edge or later. If you only support these browsers, you should go with this property.

IE >= 9 supports a similar property <code>window.pageYOffset</code>, which for the sake of compatibility returns the same as <code>window.scrollY</code> in recent browsers, though it may perhaps be deprecated at some point.

The problem with using <code>document.documentElement.scrollTop</code> or <code>document.body.scrollTop</code> is that the scroll needn't be defined on either of these. Chrome and Safari define their scroll on the <code>&lt;body&gt;</code> element whilst Firefox defines it on the <code>&lt;html&gt;</code> element returned by <code>document.documentElement</code>, for example. This is not standardized, and could potentially change in future versions of the browsers. However, if the <code>scrollY</code> or <code>pageYOffset</code> are not present, this is the only way to get the scroll.

TL;DR:

<code>window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement &amp;&amp; document.documentElement.scrollTop || 0)</code>

blocks|key|4689836|text|在可能的情况下使用window.scrollY，它被设计成在不同浏览器之间保持一致。如果你需要支持IE，那么我建议你只使用可用的window.scrollY：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4689837|typeof+window.scrollY+===+"undefined"+?+window.pageYOffset+:+window.scrollY|code-block|syntax|javascript|4689838|如果window.scrollY返回0，它将被计算为false，所以无论何时window.scrollY为0，执行window.scrollY+%7C%7C+window.pageYOffset都会从技术上检查window.pageYOffset，如果window.pageYOffset也不等于0，这显然不是理想的。|4689839|还要注意，如果您需要频繁地获取滚动值(每一帧/每一次滚动)，您可能需要检查是否预先定义了window.scrollY。我喜欢使用我写的这个小帮手函数来做这件事，同时使用requestAnimationFrame+-它应该可以在IE10和up中工作。|4689840|function+registerScrollHandler+(callback)+{
++++"use+strict"

++++var+useLegacyScroll+=+typeof+window.scrollY+===+"undefined",
++++++++lastX+=+useLegacyScroll+?+window.pageXOffset+:+window.scrollX,
++++++++lastY+=+useLegacyScroll+?+window.pageYOffset+:+window.scrollY

++++function+scrollHandler+()+{
++++++++//+get+the+values+using+legacy+scroll+if+we+need+to
++++++++var+thisX+=+useLegacyScroll+?+window.pageXOffset+:+window.scrollX,
++++++++++++thisY+=+useLegacyScroll+?+window.pageYOffset+:+window.scrollY

++++++++//+if+either+the+X+or+Y+scroll+position+changed
++++++++if+(thisX+!==+lastX+%7C%7C+thisY+!==+lastY)+{
++++++++++++callback(thisX,+thisY)

++++++++++++//+save+the+new+position
++++++++++++lastX+=+thisX
++++++++++++lastY+=+thisY
++++++++}

++++++++//+check+again+on+the+next+frame
++++++++window.requestAnimationFrame(scrollHandler)
++++}

++++scrollHandler()
}|4689841|如下所示使用函数：|4689842|registerScrollHandler(function+(x,+y)+{
++++/*+your+code+here+:)+*/
++++console.log("Scrolled+the+page",+x,+y)
})|4689843|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY^0|1S|E|9|E|0|0|0|2|E|12|E|1L|10|2T|I|3E|I|0|18|E|2C|L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|1P|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|1R|8|@]|D|@]|E|$I|J]]|$1|U|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

Use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY" rel="nofollow noreferrer">window.scrollY</a> where possible, it's designed to be consistent across browsers. If you need to support IE, then I'd recommend the following to only use <code>window.scrollY</code> if it's available:

<pre><code>typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY
</code></pre>

<code>window.scrollY</code> will be evaluated as false if it returns 0, so doing <code>window.scrollY || window.pageYOffset</code> would technically check <code>window.pageYOffset</code> whenever <code>window.scrollY</code> were 0, which obviously isn't ideal if <code>window.pageYOffset</code> did not also equal 0.

Also note that if you need to get the scroll value frequently (every frame/every scroll) as is often the case, you might want to check if <code>window.scrollY</code> is defined beforehand. I like to use this small helper function I wrote to do exactly that, along with using <code>requestAnimationFrame</code> - it should work in IE10 and up.

<pre><code>function registerScrollHandler (callback) {
 "use strict"

 var useLegacyScroll = typeof window.scrollY === "undefined",
 lastX = useLegacyScroll ? window.pageXOffset : window.scrollX,
 lastY = useLegacyScroll ? window.pageYOffset : window.scrollY

 function scrollHandler () {
 // get the values using legacy scroll if we need to
 var thisX = useLegacyScroll ? window.pageXOffset : window.scrollX,
 thisY = useLegacyScroll ? window.pageYOffset : window.scrollY

 // if either the X or Y scroll position changed
 if (thisX !== lastX || thisY !== lastY) {
 callback(thisX, thisY)

 // save the new position
 lastX = thisX
 lastY = thisY
 }

 // check again on the next frame
 window.requestAnimationFrame(scrollHandler)
 }

 scrollHandler()
}
</code></pre>

Use the function like this:

<pre><code>registerScrollHandler(function (x, y) {
 /* your code here :) */
 console.log("Scrolled the page", x, y)
})
</code></pre>

blocks|key|4689868|text|您可以使用此函数document.body.getBoundingClientRect()，它将在此对象中返回此对象{x:+0,+y:+0,+width:+1903,+height:+2691.5625,+top:+0, …};。您可以访问body+top+document.body.getBoundingClientRect().top|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4689869|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect^0|8|11|1M|1K|3L|15|8|11|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

You can use this function
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect" rel="nofollow noreferrer"><code>document.body.getBoundingClientRect()</code></a> 
 and it returns this object <code>{x: 0, y: 0, width: 1903, height: 2691.5625, top: 0, …};</code> in this object you can access body top <code>document.body.getBoundingClientRect().top</code>

blocks|key|4689873|text|使用Safari版本13或更低版本时会出现这种情况。请将您的Safari浏览器更新到14或更高版本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4689874|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

This happens when using the Safari version 13 or the lower version. Please update your Safari browser to 14 or higher.

I am trying to process some code based on the '<code>document.documentElement.scrollTop</code>' value. It returns '<code>348</code>' in FF and IE but in Chrome it returns '<code>0</code>'. Do i need to do anything to overcome this issue?

FF:

<pre><code>&gt;&gt;&gt; document.documentElement.scrollTop
342
</code></pre>

Chrome:

<pre><code>document.documentElement.scrollTop
0
</code></pre>

document.documentElement.scrollTop return value differs in Chrome

我正在尝试处理一些基于'document.documentElement.scrollTop‘值的代码。它在FF和IE中返回'348‘，但在Chrome中返回'0’。我需要做些什么来解决这个问题吗？FF：>>> document.documentElement.scrollTop342Chrome：document.d...

问document.documentElement.scrollTop返回值在Chrome中不同
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问document.documentElement.scrollTop返回值在Chrome中不同EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问document.documentElement.scrollTop返回值在Chrome中不同
EN