0

I'm able to actually make a parent wrapper div scroll horizontally as intended but there are child div elements which need to be scrollable vertically. The issue is that whenever I enable the child div to scroll vertically, the parent div still continues to scroll horizontally. Any ideas on how to go about this?

The HTML is pretty straightforward:

<div id="wrapper">         <!-- This div scrolls horizontally -->
    <div class="child">    <!-- This div scrolls normally -->
    </div>
</div>

The jQuery is pretty much a mess but I'm willing to redo it because I'm still new at this and any pointers that can help will be appreciated:

$('#wrapper').on('mousewheel DOMMouseScroll', function(event){
    var delta = Math.max(-1, Math.min(1, (event.originalEvent.wheelDelta || -event.originalEvent.detail)));
    event.preventDefault();

    // Scrollleft on mousewheel
    $(this).scrollLeft( $(this).scrollLeft() - ( delta * 90 ) );
});

I don't know what to add to it to make sure scrolling the #child element will scroll it normally (vertically) and prevent the #wrapper from scrolling at all. I could enable the #child scrolling but for some reason the #wrapper still scrolls once before stopping, which means there's a second where both #child and #wrapper scroll at the same time and then the #wrapper stops while the #child continues.

kylem
  • 47
  • 6
  • can you make a fiddle or code snippet from your code sample? Then we can investigate what actually happens. – SilentCoder Oct 17 '18 at 04:23
  • You can refer https://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element-when-inner-element-scroll-position-reaches-t – Shahaji Deshmukh Oct 17 '18 at 05:42

0 Answers0