Passing the scroll action from one element to another

Suppose I have two divs:

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

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?

---

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.

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)

Therefore, you can do something like this:

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

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

---

not sure what the layout looks like

but if they're right next to each other you could use

#control{pointer-events : none}

and change a few things.

Here's a fiddle: http://jsfiddle.net/filever10/QVRNd/

If the elements are not able to be that close, this won't be much help.

It works by putting the control over the list, and disabling pointer events on the control.

---

I tested this, and the only way I could achieve a onscroll event on a element is with an active scroll bar, which "floats". Explaining floats : it's position is at 100px from top, when it's scrolled we check if it went up or down, and then we bring it back to it's original position. So remember, you need an active scroll bar (the element's inner content should be higher than itself: you can use multiple <br> etc...);

Javascript code:

<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>

The CSS:

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

So, when you scroll inside div1 , it checks if it was scrolled up/down, scrolls div2 up/down and sets div1 to it's default scroll value. Hope this trick helps.

PS: You can make the scrollbars invisible if you make some research ( overflow:hidden is not working because there won't be active scrollbars)

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

上一篇: 如何使用chrome扩展文件系统api？

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