HTML & JavaScript - Passing the scroll action from one element to another

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?

take a look at this plugin https://github.com/brandonaaron/jquery-mousewheel Can use it on the control div to animate or scroll the other div — charlietfl, Dec 24 '12 at 06:19
Have you tried `onscroll` event ?? You can fire a javascript function in `#control` DIV and make scroll the other div — Sanuj, Dec 24 '12 at 06:23

score 6 · Answer 1 · edited Apr 14 '20 at 15:07

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) {
    e.preventDefault();
    scrollableDiv.scrollTop += e.deltaY;
});

score 2 · Answer 2 · answered Oct 23 '13 at 02:51

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.

vusan · Answer 3 · 2013-01-24T05:53:49.707

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 */
    }

.scrollDown ? Didn't heard about it. You are missing some semicolons. — Gabriel Lupu, Jan 23 '13 at 20:43
oh thanks, I deleted that line but I was giving suggestion only. — vusan, Jan 24 '13 at 05:53

score 0 · Answer 4 · answered Jan 23 '13 at 21:08

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)

score 0 · Answer 5 · answered Aug 18 '16 at 06:38

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>

score -3 · Answer 6 · answered Jan 31 '13 at 19:56

-3

Take a look to the last example -->

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

answered Jan 31 '13 at 19:56

Despertaweb

1,672
21
29

could have been a little more verbose answer – Wim Ombelets Jan 31 '13 at 20:17
1

These are answers, not links. Give a code example, tips, and warnings, and links. Not just 1 lonely unsupported link. – bjb568 Oct 23 '13 at 04:38

HTML & JavaScript - Passing the scroll action from one element to another

6 Answers6

Linked