在之前(而不是之后）触发的事件DOM 元素在 javascript 中滚动

Event that gets fired before (not after!) DOM elements are scrolled in javascript

本文关键字：事件 DOM 元素 滚动 javascript 之后      更新时间：2023-09-26

基本上，我想在滚动 DOM 元素之前做一些预处理。问题是滚动事件是在 DOM 元素滚动后触发的。我知道当您使用鼠标滚轮滚动时，鼠标滚轮滚动事件会在 DOM 元素滚动之前触发，尽管它没有为您提供预期的滚动位置，并且它只是一种滚动类型。我想知道是否有任何事件会为每个滚动方法触发（例如鼠标滚轮、拖动滚动条、按下向下箭头等）在滚动 DOM 元素之前。它不一定是一个事件。我没有尝试滚动到某个位置，因此 scrollTo 将不适用。

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

所需的事件链：用户滚动 ->捕获某些事件并执行我想做的事情 -> DOM 元素物理滚动 ->触发滚动事件 ->处理东西

这里有一些你可能想尝试的东西。

给你的页面overflow:hidden，这样就不会出现滚动条，然后在内容上放置一个绝对定位的div，具有正确的宽度和高度。滚动此div 时，可以在重新触发事件之前更新任何基础内容。

您还需要通过点击等，所以这确实是一个黑客。像jQuery这样的东西将有助于触发事件和测量内容的高度。

编辑：根据浏览器的不同，css pointer-events:none可能会在这里有所帮助。见 https://developer.mozilla.org/en/css/pointer-events

你能

做的最好的事情就是当onScroll触发时，如果scrollTop> thingToStick与顶部的距离，则position: fixed设置为thingToStick否则，position设置为原来的任何内容。从不粘到粘时它会闪烁，但除此之外，你不会有任何闪烁。

在 sudo-ish 代码中：

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

在不支持fixed定位的浏览器中，您会陷入

闪烁...

以前从未尝试过，但要打破事件链，可以：

  1. 捕获滚动事件
  2. 做你的事情
  3. 使用 preventDefault（） 和 stopPropagation 来禁止事件
  4. 使用原始事件伪造新的滚动事件（我认为这应该是可行的）

希望这会有所帮助。

相关文章：