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

Question

假设我有两个div：

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

我希望让鼠标光标停留在#control内并滚动鼠标滚轮时，滚动#view。有什么方法可以实现吗？

- gsklee

---

看一下这个插件 https://github.com/brandonaaron/jquery-mousewheel 可以在控制div上使用它来动画或滚动其他的div。 - charlietfl

你尝试过使用 onscroll 事件吗？你可以在 #control DIV 中触发一个 JavaScript 函数，从而滚动另一个 DIV。 - Sanuj

Answer 1

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

注意：此方法适用于鼠标或触控板，并且会提供正确的方向（-/+），无论 Y 轴设置是否反转（即：苹果的自然/非自然滚动）。

因此，您可以像这样操作：

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

- Gopherkhan

Answer 2

不确定布局是什么样子

但如果它们紧挨在一起，您可以使用

#control{pointer-events : none}

并且更改一些内容。

这里有一个示例：http://jsfiddle.net/filever10/QVRNd/

如果元素不能够靠得那么近，这个方法就没什么用了。

它的实现方式是通过控制列表，并在控制上禁用指针事件。

- FiLeVeR10

Answer 3

这可能对你有所帮助： 文档具有其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 */
    }

- vusan

---

.scrollDown？没听说过。你少了一些分号。 - Gabriel Lupu

哦，谢谢。我删掉了那行代码，但只是给出了建议。 - vusan

Answer 4

我测试过了，唯一能够在元素上实现onscroll事件的方法是使用一个“浮动”的活动滚动条。解释一下浮动：它的位置距离顶部100像素，当它被滚动时，我们检查它是向上还是向下移动，然后将其带回到原来的位置。所以请记住，您需要一个活动的滚动条（元素的内部内容应该比自身更高：您可以使用多个<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 不起作用，因为没有活动的滚动条）。

- Gabriel Lupu

Answer 5

尝试以下解决方案。您可以在您的control div上监听事件mousewheel，并根据滚动量（使用WheelEvent.deltaY检索值）滚动其他div view；

更多信息可以在这里找到：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>

- GibboK

Answer 6

看一下最后一个例子 -->

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

- Despertaweb

---

可以说得更详细一些。 - Wim Ombelets

这些是答案，而不是链接。请给出代码示例、提示和警告以及链接。不要只提供一个孤立的不支持的链接。 - bjb568