HTML和JavaScript – 将滚动操作从一个元素传递到另一个元素

发布时间：2020-12-14 18:42:21 所属栏目：资源来源：网络整理

导读：假设我有两个div： div id="control"/divdiv id="view"(A scrollable list)/div 而且我想这样做,以便当光标停在#control内并滚动鼠标滚轮时,#view将被滚动.无论如何要实现这一目标？解决方法好的,快速修复对我有用.即使固定div不可滚动,因为它没有内容溢出

假设我有两个div：

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

而且我想这样做,以便当光标停在#control内并滚动鼠标滚轮时,#view将被滚动.无论如何要实现这一目标？

解决方法

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

注意：这适用于鼠标或触控板,无论反转的Y轴设置如何,都会为您提供正确的方向( – /)(读取：Apple的(联合国)自然滚动)

因此,您可以这样做：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!