在JavaScript中，当DOM元素滚动之前（而不是之后！）触发的事件是什么？

Question

基本上，我想在DOM元素滚动之前进行一些预处理。问题是滚动事件在DOM元素滚动后触发。我知道当使用鼠标滚轮滚动时，鼠标滚轮滚动事件会在DOM元素滚动之前触发，尽管它不提供预期的滚动位置，并且它只是一种滚动方式。我想知道是否有任何事件在每次滚动方法（例如鼠标滚轮、拖动滚动条、按下向下箭头等）在DOM元素滚动之前触发。它不必是一个事件。我不想滚动到特定位置，所以scrollTo不适用。

on scroll的事件链： 用户滚动 -> DOM元素物理滚动 -> 触发onScroll事件 -> 处理内容

期望的事件链： 用户滚动 -> 捕获某个事件并执行我想要的操作 -> DOM元素物理滚动 -> 触发onScroll事件 -> 处理内容

- Chris Hong

---

我相信你运气不佳。 - epascarello

在DOM滚动之前，你想做什么事情，而在onScroll事件触发时无法完成？如果你与我们分享这些信息，或许我们可以指导你寻找替代方案。 - Kris Ivanov

我正在尝试“固定”内容。当用户滚动并且滚动顶部到达某些像素时，一些DOM元素开始“固定”。在那个短暂的时刻，“固定”（用克隆元素替换原始元素并将其定位到应该“固定”的位置），浏览器似乎会闪烁。如果我在滚动之前正确地定位克隆元素（使用鼠标滚轮事件进行测试），它就不会闪烁。 - Chris Hong

使用CSS中的position和float属性可以将控件固定在页面顶部。您想要将一个带有“丝带”的控件固定在页面顶部，即使用户向下滚动吗？ - Raghav

我不会固定在页面顶部。元素只有在特定范围内才会固定。 - Chris Hong

Answer 1

以前从未尝试过这个，但为了打破事件链，可以：

1. 捕获滚动事件
2. 做你的事情
3. 使用preventDefault()和stopPropagation来抑制事件
4. 使用原始事件模拟新的滚动事件（我认为这应该是可行的）

希望这能帮到你。

- sitifensys

---

在捕获滚动事件时，元素已经被滚动了。 - Chris Hong

滚动是一种异步事件，这就是为什么它不能通过onscroll监听器中接收到的滚动事件对象来防止 ;) - csuwldcat

Answer 2

这里有一个你可能想尝试的方法。

给你的页面添加overflow:hidden，这样就不会出现滚动条，然后放置一个正确宽度和高度的绝对定位的div覆盖在内容上。当这个div被滚动时，你可以更新任何底层内容，然后重新触发事件。

你还需要传递点击等事件，所以这真的是一种hack。像jQuery这样的东西可以帮助触发事件并测量内容的高度。

编辑：css pointer-events:none 可能会在某些浏览器中有所帮助。请参见https://developer.mozilla.org/en/css/pointer-events

- James Westgate

---

我认为这是唯一的方法。 - Chris Hong

@Chris Hong：我不同意。pointer-events可能对Chrome、Safari和Firefox有帮助，但除此之外，需要大量的JavaScript来近似鼠标位置，以便光标更改以识别链接。title属性将变得毫无意义，文本选择将变得更加困难。这绝对不是正确的方法，无论是黑客还是其他方式。一个更强大的黑客将涉及捕获onmousewheel、DOMMouseScroll和keydown事件，以检测用户何时滚动，但它对于当他们拖动滚动条时没有帮助。 - Andy E

再仔细考虑一下，DIV 不必覆盖内容，实际上可以只在右边缘宽 1 像素，从而引起滚动条的出现，然后使用它来捕获和触发所有滚动事件（它将是唯一一个不是 overflow: hidden 的元素）。我们需要一个计时器来获取当前文档高度，或者构建一个跨浏览器的“height:100%”兼容解决方案。 - James Westgate

Answer 3

最好的做法是当onScroll触发时，如果scrollTop大于thingToStick距离顶部的距离，则在thingToStick上设置position: fixed，否则将position设置为原来的值。从不粘到粘的变化会闪烁，但除此之外，您不会遇到任何闪烁。

伪代码如下：

onScroll = function()
{
    if(scrollTop > thingToStick.y)
        thingToStick.position = "fixed";
    else
        thingToStick.position = "relative";
}

在不支援 fixed 定位的瀏覽器中，你只能忍受閃爍的問題...

- MicronXD

---

谢谢您的建议。但我们正在努力避免任何闪烁。 - Chris Hong