javascript - HTML & JavaScript - 将滚动 Action 从一个元素传递到另一个元素

Question

假设我有两个 div:

<div id="control"></div>
<div id="view">(A scrollable list)</div>

我想做到这一点，当光标停在 #control 内并且滚动鼠标滚轮时，#view 将被滚动。无论如何要实现这一目标？

Answer 1

好的，快速修复对我有用。即使固定的 div 不可滚动，因为它没有溢出其边界的内容，您仍然可以检测到 mousewheel 事件。 mousewheel 事件包含滚动的 x/y 维度的增量。

注意:这适用于鼠标或触控板，并且会为您提供正确的方向 (-/+)，而不管 Y 轴的倒置设置如何(阅读:Apple 的(非)自然滚动)

因此，你可以这样做:

var fixedDiv = document.querySelector('.my-fixed-div');
var scrollableDiv = document.querySelector('.my-scrollable-list');

fixedDiv.addEventListener('mousewheel', function (e) {
    e.preventDefault();
    scrollableDiv.scrollTop += e.deltaY;
});