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

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;
});

Answer 2

不确定布局是什么样的

但如果它们彼此相邻，您可以使用

#control{pointer-events : none}

并改变一些东西。

这是一个小提琴：http://jsfiddle.net/filever10/QVRNd/

如果元素不能那么接近，这将无济于事。

它的工作原理是将控件放在列表上，并在控件上禁用指针事件。

Answer 3

我对此进行了测试，我可以在元素上实现onscroll 事件的唯一方法是使用“浮动”的活动滚动条。解释浮动：它的位置在距离顶部 100px 处，当它滚动时，我们检查它是向上还是向下，然后我们将它带回原来的位置。所以记住，你需要一个活动的滚动条（元素的内部内容应该高于它自己：你可以使用多个<br>等...）；

Javascript 代码：

<script type="text/javascript">
        var defaultScrollTop = 100; /* testing value */

        window.onload = function() {
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");

            div1.scrollTop = defaultScrollTop; // Initialize to float

            div1.onscroll = function(event) {
                if (defaultScrollTop < div1.scrollTop) {
                    div2.scrollTop += 100; //scrollDown
                } else if (defaultScrollTop > div1.scrollTop) {
                    div2.scrollTop -= 100; //scrollUp
               }

               div1.scrollTop = defaultScrollTop;                
            }
        }
    </script>

CSS：

<style>
    #div1, #div2 {
        max-height: 100px; /* For testing */
        overflow-y: scroll;
    }
</style>

因此，当您在 div1 内滚动时，它会检查它是否向上/向下滚动，向上/向下滚动 div2 并将 div1 设置为其默认滚动值。希望这个技巧有帮助。

PS：如果您进行一些研究，可以使滚动条不可见（overflow:hidden 不起作用，因为不会有活动的滚动条）

Answer 4

这可能会对您有所帮助：

Document 有 onscroll 的功能。

document.onscroll=moveSetting;

假设div1 被滚动并且鼠标指针应该在div2。
因此，只有当鼠标位于 div2 时，我们才必须执行 scFunc()。我们可以通过

function moveSetting(evt)
{       var div2Obj=document.getElementById('div2');
        var width=div2Obj.style.width;
        var border=div2Obj.style.border;
       var x=evt.pageX,y=evt.pageY,
       var leftChk=div2Obj.offsetLeft;
       var topChk=div2Obj.offsetTop;
        if(x>=leftChk && x<=(leftChk+width+border*2) && y>=topChk && y<=(topChk+width+border*2)) {
                scrollFunc();       
    }


}

var i,j;
    function scrollFunc() {
       var i=document.getElementById('div1').scrollTop;

       i++;
       i=j-1;

       document.getElementById('div1').scrollTop=i;
       /* manage your code yourself to scroll div1 from here */
    }

Answer 5

尝试以下解决方案。您可以在 control div 上收听事件 mousewheel 并根据执行的滚动量滚动另一个 div view（使用 WheelEvent.deltaY 检索值）；

更多信息可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY

var fixedDiv = document.getElementById('control'),
    scrollableDiv = document.getElementById('view');

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

#control,
#view {
  width: 500px
}

#view {
  height: 500px;
  overflow: auto;
  padding-top: 30px
}

#control {
  position:fixed;
  height: 50px;
  background-color: red
}

<div id="control">Keep your mouse here and scroll</div>
<div id="view">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

Answer 6

看最后一个例子 -->

http://api.jquery.com/scroll/