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

Question

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

澄清一下，我正在寻找从屏幕上的任何位置滚动特定元素的能力，而不是无限滚动的方法。

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

Answer 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>

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

希望能帮到你

此致

塞巴斯蒂安

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

Scrolling with mouse-wheel from anywhere, as on Twitter desktop

javascript

twitter

scroll