javascript - 包装文档或窗口对象以检查滚动值？

为了检查我以前用jQuery包装window对象的页面的滚动值，但是在滚动时，滚动事件的目标元素将成为document对象：

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

要包装以检查滚动值的正确对象是什么？
我知道它们之间的区别（一个窗口可以包含多个框架，因此可以包含许多文档），但是对于单个文档上下文，我看到滚动值一致：

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

编辑：

原生JavaScript也会发生这种情况：

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

绑定的元素是window，但事件目标是document。

关于上面的表达式，将window对象的scrollTop值与document对象之一进行比较：jQuery文档说明$(window).width()返回视口的宽度，而$(document).width()返回视口的宽度。 HTML DOM元素；由于视口可能小于整个HTML元素的宽度，因此这两个值可能会有所不同。

最佳答案

暂时将jQuery放在一旁，您可以使用普通的JavaScript检查当前垂直滚动位置的window的以下属性：

window.pageYOffset;
window.scrollY;

第二个不是跨浏览器according to MDN。仍然根据该说明，在IE document.body.scrollTop，因为window的任何属性都不会为您提供当前滚动位置。实际上，document.body.scrollTop是我最常使用的，因为根据我的经验，它只是跨浏览器工作（此处需要引用和检查）。

jQuery考虑了浏览器的差异，无论您为.scrollTop()使用哪个选择器（请查看source code），都可以从正确的对象获取正确的属性。简而言之，在要求window时，是使用jQuery选择document还是.scrollTop()都没有关系。它将查找window.pageYOffset，如果找不到它，它将返回document.body.scrollTop。



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

// 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