How do I manually scroll a div with jQuery?

Question

Let's say you have a tooltip with a lot of content so you need to have it scrollable. Of course you can't move your mouse over to scroll the tooltip since the tooltip will get hidden when you navigate away with your coursor.

<!-- Let's assume this is my tooltip and -->
<div id="scrollableTooltip">
   <p>foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar... ∞ </p>
</div>

<div id="triggerDiv">
    <!-- When I hover and scroll here, I want to scroll my tooltip -->
    <p>Scroll inside me to trigger scroll in div above...</p>
</div>

I have tried the following in order to target the mousewheel DOMMouseScrollevent and then using jQuery to try to trigger a scroll in my tooltip div - but without any success (Please see my JSFiddle):

$('#triggerDiv')
    .on('mousewheel DOMMouseScroll', function (e){

        console.log("Scroll was triggered...", e);

        // 1. 
        $('#scrollableTooltip').scroll();

        // 2. 
        // $('#scrollableTooltip').trigger('scroll');
  });

CSS

#scrollableTooltip {
  border: 1px solid red;
  height: 100px;
  overflow-y: scroll;
  margin-bottom: 30px;
}

#triggerDiv {
  border: 1px solid red;
  height: 200px;
}

Are you looking for something like this? http://stackoverflow.com/questions/9236314/how-do-i-synchronize-the-scroll-position-of-two-divs — Woodrow, Apr 26 '17 at 16:32
In my case, only the top div is scrollable, so not quite. But thanks! — XT_Nova, Apr 27 '17 at 06:53

score 2 · Accepted Answer · answered Apr 26 '17 at 16:55

You need to get the current scroll position of the scrollable tooltip, then adjust it by the scroll delta.

Edit: Added a "preventDefault" to keep the target from scrolling.

$('#triggerDiv').on('mousewheel DOMMouseScroll', function (e){
    // console.log("Scroll was triggered...", e);

    // 1. 
    $('#scrollableTooltip').scrollTop(e.originalEvent.deltaY + $('#scrollableTooltip').scrollTop());

    // 2. 
    // $('#scrollableTooltip').trigger('scroll', e);

    e.preventDefault();
});

#scrollableTooltip {
  border: 1px solid red;
  height: 100px;
  overflow-y: scroll;
  margin-bottom: 30px;
}

#triggerDiv {
  border: 1px solid red;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Let's assume this is my tooltip and -->
<div id="scrollableTooltip">
   <p>foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar foo bar foo bar foo bar 
      foo bar foo bar foo bar... ∞ </p>
</div>

<div id="triggerDiv">
    <!-- When I hover and scroll here, I want to scroll my tooltip -->
    <p>Scroll inside me to trigger scroll in div above...</p>
</div>

Thank you nate for enlighten me! The only thing I had to modify was to make it scroll a smaller portion: `$tooltip.scrollTop(e.originalEvent.deltaY / 2 + $tooltip.scrollTop());` (I just divided the original event delta y by two in this case which worked just fine). Thanks. — XT_Nova, Apr 27 '17 at 07:05

How do I manually scroll a div with jQuery?

1 Answers1