从任何地方用鼠标滚轮滚动，就像在 Twitter 桌面上一样答案

【问题标题】：Scrolling with mouse-wheel from anywhere, as on Twitter desktop从任何地方用鼠标滚轮滚动，就像在 Twitter 桌面上一样
【发布时间】：2020-11-22 21:02:17
【问题描述】：

如何像在 Twitter Web 桌面站点上那样实现滚动？在那里，可以使用鼠标滚轮从页面上的任何位置滚动中心列，即使定位在固定元素上，或者在中心列之外单击。

为了澄清，我正在寻找这种从屏幕上任意位置滚动特定元素的能力，而不是如何进行无限滚动。

分析 Twitter 使用的代码可能需要一些时间...

【问题讨论】：

标签： javascript twitter scroll

【解决方案1】：

所以这是一个类似于 Twitter 页面的情况：

<html>
    <body>
        <div id="scrollThis" style="height: 100px; width: 400px; overflow-y: auto;">
            <h1>Test</h1>
            <h1>Test</h1>
            <h1>Test</h1>
            <h1>Test</h1>
            <h1>Test</h1>
            <h1>Test</h1>
        </div>
    </body>
</html>
<script>
document.addEventListener("wheel", function(event) {
  factor = event.deltaMode === 1 ? 16 : 1;
  delta = factor * event.deltaY || -event.wheelDelta || event.detail;
  document.getElementById("scrollThis").scrollTop = document.getElementById("scrollThis").scrollTop + delta
  });
</script>

这段代码所做的只是向整个文档添加一个轮子监听器。移交的事件拥有一个 int deltaY。这是一个整数，表示您向上或向下滚动多少像素（在我的情况下为 +57 或 -57）。所以基本上我将此 int 添加到应该向下滚动的 div 的 scrollTop 中，然后它可以工作:)

希望能帮到你

最好的问候

塞巴斯蒂安

【讨论】：

谢谢@Sebastian，我会试试这个——看起来不错。我错过了 delta 部分.. 早上会接受你的回答！
@Ken 没问题 :)
我试过这个，我发现我的 event.deltaY 只有 3，这导致滚动速度非常慢。所以我尝试scrollTop+(event.deltaY*18) 来近似您的示例。这完美地工作，但这不能成为解决方案。需要更多帮助...
原始答案在 Firefox 上不起作用，其中 Wheel 事件的 deltaMode 属性设置为 1 (DOM_DELTA_LINE)，这意味着滚动单位是一条线而不是一个像素。增加 deltaY 使其工作。链接：https://github.com/harvesthq/chosen/issues/2823#issuecomment-327711935我编辑了塞巴斯蒂安的答案以反映这一点。
另一个不错的链接：stackoverflow.com/questions/20110224/…