HTML& JavaScript - 将滚动操作从一个元素传递给另一个元素 [英] HTML & JavaScript - Passing the scroll action from one element to another

问题描述

假设我有两个div：

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

我想让它使得当光标停在 #control ，滚轮滚动， #view 将被滚动。无论如何，要实现这一点？

And I'd like to make it so that when the cursor is parked inside #control and the mousewheel is scrolled, #view will be scrolled instead. Anyway to achieve this?

推荐答案

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

Okay, quick fix that worked for me. Even though the fixed div is not scrollable, as it has no content to overflow its bounds, you can still detect mousewheel events. mousewheel events contain deltas for the x/y dimensions scrolled.

注意：这适用于鼠标或跟踪垫，并且将为您提供正确的方向（ - / +），无论倒置的Y轴设置如何（阅读：Apple's （un）自然滚动）

Note: This works for mice or track-pads, and will give you the proper direction (-/+), regardless of inverted Y-Axis settings (read: Apple's (un)natural scrolling)

因此，您可以这样做：

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

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

这篇关于HTML& JavaScript - 将滚动操作从一个元素传递给另一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！