包装文档或窗口对象以检查滚动值？ [英] Wrap the document or window object to check scroll value?

问题描述

要检查我用来用jQuery包装窗口对象的页面的滚动值，但滚动时，scroll事件的目标元素将成为 document object：

To check the scroll values of the page I used to wrap the window object with jQuery, but when scrolling, the target element of the scroll event results to be the document object:

$(window).scroll(function(e) {
    alert('Scrolling ' + e.target);
});

检查滚动值的正确对象是什么？

我知道它们之间的区别（一个窗口可以包含多个框架，因此很多文档），但对于单个文档上下文，我看到滚动值重合：

What is the right object to wrap to check the scroll values?
I know the difference between them (a window can contain multiple frames thus many documents), but for a single document context I see the scroll values coincide:

alert($(window).scrollTop() === $(document).scrollTop());

编辑：

本机JavaScript也会发生这种情况：

It also happens with native JavaScript:

window.onscroll = function(e) { alert('scrolled ' + e.target); };

元素绑定是窗口，但是事件目标是文档。

The element bound is window, but the event target is document.

关于上面写的表达式，比较窗口的scrollTop值具有文档对象之一的对象：jQuery文档解释 $（window）.width（）返回视口的宽度，而 $（document）.width（）返回HTML DOM元素的宽度;由于视口可能小于整个HTML元素的宽度，因此这两个值可能不同。

About the expression written above, comparing the scrollTop value of the window object with the one of the document object: the jQuery documentation explains that $(window).width() returns the width of the viewport, while $(document).width() returns the width of the HTML DOM element; since the viewport may be smaller than the whole HTML element width, these two values may differ.

推荐答案

暂时搁置jQuery ，使用纯JavaScript，您可以检查当前垂直滚动位置的窗口的以下属性：

Leaving jQuery aside for a moment, using plain JavaScript you can check the following properties of window for the current vertical scrolling position:

window.pageYOffset;
window.scrollY; 

第二个不是跨浏览器，org / en-US / docs / DOM / window.scrollYrel =nofollow>。仍然根据这一点，在IE< 9上你必须检查 document.body.scrollTop ，因为 window 的属性不会给你当前的滚动位置。实际上， document.body.scrollTop 是我最常使用的，因为根据我的经验，它只适用于跨浏览器（此处需要引用和检查）。

The second one is not cross-browser according to MDN. Still according to that, on IE<9 you must check document.body.scrollTop, as no property of window will give you the current scroll position. Actually, document.body.scrollTop is what I use most frequently, as in my experience it just works cross-browser (citation and checking needed here).

jQuery将浏览器差异考虑在内，并从正确的对象中获取正确的属性，无论您使用哪个选择器 .scrollTop（）（请查看源代码 ）。简而言之，如果您在询问 window 或 document 并不重要> .scrollTop（）。它会查找 window.pageYOffset ，如果找不到它，它将返回 document.body.scrollTop 。

jQuery takes the browser differences into consideration, and grabs the right property from the right object regardless of which selector you use for .scrollTop() (take a look at the source code). In short, it doesn't matter if you select window or document with jQuery when asking for .scrollTop(). It will look for window.pageYOffset, and if it can't find it, it will return document.body.scrollTop.

关于每个窗口对多个文档的评论的注释：从技术上讲，每个窗口 object仅指向一个文档，反之亦然。当您有多个框架时，每个框架都有单独的窗口和文档元素。例如，如果您获得对单个iframe的引用，则可以从中获取自己的窗口和文档：

A note about your comment on multiple documents per window: technically, each window object only points to a single document, and vice-versa. When you have multiple frames, there are separate window and document elements for each frame. For example, if you get a reference to a single iframe, you can get its own window and document from it:

// first iframe in main document
var ifr = document.getElementsByTagName('iframe')[0];
var ifrWindow = ifr.contentWindow;
var ifrDocument = ifrWindow.document; 
// The above is good for new and old browsers; 
// ifr.contentDocument is also available on modern browsers

这篇关于包装文档或窗口对象以检查滚动值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！