将滚动操作从一个元素传递到另一个元素

假设我有两个div：

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

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

---

好的，快速修复对我来说很有用。 即使固定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) {
  scrollableDiv.scrollTop += e.deltaY;
});

---

不知道布局是什么样子

但是如果他们彼此相邻，你可以使用

#control{pointer-events : none}

并改变一些事情。

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

如果元素不能那么接近，这不会有太大的帮助。

它通过将控件放在列表上并禁用控件上的指针事件来工作。

---

我测试了这一点，我可以在元素上实现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不起作用，因为不会有活动的滚动条）

链接地址: http://www.djcxy.com/p/11625.html

上一篇: Passing the scroll action from one element to another

下一篇: How to sign manually an exe file with developer licence for Windows 8 RT