HTML & JavaScript - Passing the scroll action from

Question

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?

Answer 1

Take a look to the last example -->

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

Answer 2

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.

Answer 3

Try the following solution. You could listen to event mousewheel on your control div and scroll the other div view based on the amount of scroll performed (value is retrieved using WheelEvent.deltaY);

More information can be found here: 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 4

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)

Answer 5

This might help you:

Document has its function onscroll.

document.onscroll=moveSetting;

Let say div1 to be scrolled and mouse pointer should be at div2.
So we have to execute the scFunc() only if the mouse is at div2. We can achieve this by

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 6

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