使用window.onscroll事件来检测页面/框架滚动 [英] Using window.onscroll event to detect page/frame scrolling

问题描述

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

I want to postion a DIV inside a page such that it is visible to the user even if the user vertically scrolls the page.

该页面的页面顶部是 75 px tall。现在当用户位于页面顶部并且没有垂直滚动时， DIV 必须在标题下方被表示。但是，一旦用户滚动页面导致标题不可见，相同的 DIV 现在必须位于页面顶部（即靠近顶部的顶端）浏览器视口）

The page has a heading at the top of the page which is 75 px tall. Now when the user is at the top of the page and has not scrolled vertically, the DIV must be postioned below the heading. However, once the user scrolls the page causing the heading to go out of sight, the same DIV must now be position at the top of the page (i.e. near the top edge of the browser viewport)

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

My big concern is the support for window.onscroll event on browsers. I checked QuirksMode for compatibility (http://www.quirksmode.org/dom/events/scroll.html). It seems to have decent compatibility on IE and Firefox. However the Safari and Chrome support seems a bit quirky. And both these browsers are part of my target browsers' list.

有人可以告诉我，如果 window.onscroll 事件是检测页面/框架滚动的有效方法？任何其他建议？

Can anybody tell me if the window.onscroll event is an effective way of detecting page/frame scrolls? Any other suggestions?

我已考虑使用CSS 位置：固定的规则。它接近解决方案，但是$ DIV 只是停留在一个位置，我根本不能适应性地移动。

P.S. I have considered using the CSS position: fixed rule. It is close to the solution but the DIV is just stuck to one position and I cannot have it adaptively move based on the visiblity of the heading.

谢谢！

推荐答案

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

If you read about the clunkiness in WebKit on Quirksmode, you'll notice the following:

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

Safari (but not on iPhone) and Chrome seem to monitor scrollTop acces in order to determine whether the user has scrolled an element. The log function of my test script changes scrollTop regularly, and Safari responds by firing a scroll event. Since the logging of this event changes the log element's scrollTop once more, scroll events will be fired continuously. All this happens when the log element at the bottom of the page doesn't have a scrollbar yet, when it has a normal overflow: visible, and even when I set scrollTop to 0 each time a new event is logged. The buggy behaviour stops only when I remove the scrollTop line entirely.

此问题不应影响您尝试实现的目标你没有设置任何元素的 scrollTop 。您将 onscroll 附加到窗口中，无论如何，任何浏览器似乎都没有问题。

This issue shouldn't affect what you're trying to achieve since you're not setting the scrollTop of any element. You're attaching onscroll to the window, which appears to have no issues between any browser anyway.

这篇关于使用window.onscroll事件来检测页面/框架滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！