使用 window.onscroll 事件检测页面/框架滚动答案

【问题标题】：Using window.onscroll event to detect page/frame scrolling使用 window.onscroll 事件检测页面/框架滚动
【发布时间】：2010-04-01 16:23:59
【问题描述】：

我想在页面内发布DIV，这样即使用户垂直滚动页面，用户也可以看到它。

页面顶部有一个标题为75 px 高。现在，当用户位于页面顶部并且没有垂直滚动时，DIV 必须位于标题下方。但是，一旦用户滚动页面导致标题消失，相同的DIV 现在必须位于页面顶部（即靠近浏览器视口的顶部边缘）

我最关心的是浏览器对window.onscroll 事件的支持。我检查了 QuirksMode 的兼容性 (http://www.quirksmode.org/dom/events/scroll.html)。它似乎在 IE 和 Firefox 上具有不错的兼容性。然而，对 Safari 和 Chrome 的支持似乎有点古怪。这两个浏览器都是我的目标浏览器列表的一部分。

谁能告诉我window.onscroll 事件是否是检测页面/框架滚动的有效方法？还有其他建议吗？

附：我考虑过使用 CSS position: fixed 规则。它接近解决方案，但 DIV 只是卡在一个位置，我不能让它根据标题的可见性自适应移动。

谢谢！

【问题讨论】：

标签： javascript events dom html onscroll

【解决方案1】：

这是您可以尝试的另一种替代方法。我用它在页面顶部放置一个工具栏 div（也适用于 ipad）。

我没有使用 onScroll 事件，而是使用计时器每 500 毫秒触发一次，以检测窗口通过 scrollTop 滚动到的位置。如果您愿意，可以将计时器调整为大约 200 毫秒。

这是我的代码的精简示例：

这个 jquery 代码检查我的名为“floatlayer”的 dom 元素 div（这是一个包含我的按钮工具栏的 div）何时以及是否准备好，然后调用函数 setRepeater

$(#floatlayer").ready(function () {
    return setRepeater();
});

然后，这个函数创建了一个定时器，以每隔 500 毫秒执行一次函数“keepIncrease”

 function setRepeater() {
        aTimer = window.setInterval("keepIncrease()", 500);
        return false;
    }

这是每500ms重复一次的函数keepIncrease()，负责根据当前窗口滚动位置定位工具栏div：

function keepIncrease() {
    var divToolbar = $("#floatlayer")[0];

    var currentPos =  $(window).scrollTop();
    divToolbar.style.top = currentPos + "px";

    return false;
}

其他题外话：如果您的内容在 iframe 内，您也可以使用 $(window.parent).scrollTop() 而不是 $(window).scrollTop()

【讨论】：

【解决方案2】：

如果您在 Quirksmode 上阅读 WebKit 的笨拙之处，您会注意到以下内容：

Safari（但不是在 iPhone 上）和 Chrome 似乎监视 scrollTop 访问以确定用户是否滚动了元素。我的测试脚本的日志功能会定期更改 scrollTop，Safari 通过触发滚动事件来响应。由于这个事件的记录再次改变了日志元素的滚动顶部，滚动事件将被连续触发。当页面底部的日志元素还没有滚动条，当它有一个正常的溢出：可见，甚至当我每次记录一个新事件时我将 scrollTop 设置为 0 时，所有这些都会发生。仅当我完全删除 scrollTop 行时，错误行为才会停止。

此问题不应该影响您想要实现的目标，因为您没有设置任何元素的 scrollTop。您正在将onscroll 附加到窗口，这似乎在任何浏览器之间都没有问题。

【讨论】：

【解决方案3】：

~~为什么不直接使用“固定”？~~

哦，我明白了，我错过了关于标题的部分。

不过，您仍然可以使用 position:fixed 选项。您最初只需将位置设置为“body”（考虑 75px 间隙），一旦标题离开可见性，您可以将 div 重新对齐到视口的顶部。但是如果不以某种方式使用 onscroll，您可能无法做您想做的事情。有时你只需要做出决定：我想要更多的功能，还是更多的人？

【讨论】：