在捕获事件的同时禁用滚轮？

Question

我希望能够在没有事件附带的实际功能的情况下处理鼠标滚轮事件。

基本上，我有一个鼠标滚轮事件的事件处理程序，我将一些信息输出到与这些事件相关的 div 中，并使用 scrollTop=scrollHeight 使其滚动到底部，这样我就可以不断看到新的行输出。

这里发生的事情是每次我使用事件侦听器滚动页面部分时，它都会调用它并将事件字符串作为新行输出到 div。

相关代码如下：

eventHandler = (e) => {
    e.persist();
    const display = document.getElementById('inputDisplayer');
    const msg = document.createElement('div');

    msg.innerText = e.timestamp;
    display.append(msg);
    display.scrollTop = display.scrollHeight;
};

这里的问题是我可以毫无问题地向下滚动，这甚至可以在显示事件时处理任何其他鼠标或键盘事件，但我唯一的问题是向上滚动。似乎事件背后的功能是在根据 scrollHeight 更新 scrollTop 之后发生的，所以即使我的程序尝试将其滚动到底部，向上滚动事件也会在之后立即向上滚动并阻止我看到新的行在 div 的底部。

这里有一些 GIF 来表达我的意思：

这是当我单击或向下滚动时的样子，它一直滚动到底部，所以我可以看到最新的一行： left/right clicking and down scrolling

这是我向上滚动时的样子，如您所见，我可以短暂看到新行，但随后向上滚动开始。 scrolling upwards

因此，我正在寻找一种方法来以某种方式禁用向上滚动鼠标功能，同时仍然能够捕获实际的向上滚动事件并将滚动条保持在一边。

Answer 1

试试这个

eventHandler = (e) => {
    e.preventDefault();

    const display = document.getElementById('inputDisplayer');
    const msg = document.createElement('div');
    msg.innerText = e.timestamp;
    display.append(msg);        
};

此外，我会将const display = document.getElementById('inputDisplayer'); 移到 eventHandler 之外以提高性能。目前它必须重新扫描 DOM 并在每次收到事件时获取元素。