2

为了检查页面的滚动值，我使用windowjQuery 包装对象，但是在滚动时，滚动事件的目标元素结果是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。

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

4

1 回答 1

3

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

window.pageYOffset;
window.scrollY;

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

jQuery 考虑了浏览器的差异，并从正确的对象中获取正确的属性，而不管您使用哪个选择器.scrollTop()（查看源代码）。简而言之，window在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
于 2012-12-27T18:59:42.360 回答