How to restrict scrolling to the div that mouse is currently hovering?

Question

I have a div name scrollable and whenever I hover mouse over it I want scrolling limited to this div only so that after reaching top/bottom of the div, scrolling will be stuck to the div. I've used the following code:

<div class="scrollable" style="overflow-y: scroll; height: 2px;" 
 onmouseover="document.body.style.overflow='hidden'" 
 onmouseout="document.body.style.overflow='auto'" >
   Some text<br>sometext<br>sometext 
</div>

Doing this gets the job done, but only problem as main scrollbar is hidden the webpage looks weird everytime I hover over '.scrollable'

Also using window.onwheel=function(){return false;} doesnt help as it prevents scrolling of anyelement.

Is there a way to enable scrolling only on hovered div and not on others while keeping main page scrollbar visible?

Thank you

I don't think you need to do anything, this behavior comes by default. — Avinash, Feb 01 '16 at 15:16
it really doesnt when i reach bottom or top of the div scrolling further moves the main page — user3086871, Feb 01 '16 at 15:18
Then make the scrollbar to whole page always hidden something like this http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — Avinash, Feb 01 '16 at 15:22
Or this http://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it — Avinash, Feb 01 '16 at 15:24
I thought about that, tried it but it doesnt look good on my website, I was wondering how facebook does it, when I open my chat box and scroll in it, scrolling works only in it, while keeping main page's scrollbar visible and unaffected even if I scroll at bottom/top in the chatbox. That's exactly what I want — user3086871, Feb 01 '16 at 15:27

score 4 · Accepted Answer · edited May 23 '17 at 12:22

4

You can disable scrolling without hiding the scrollbar, check this post.

Using jQuery, this would lead to:

$(".scroll").hover(function() {
  var oldScrollPos = $(window).scrollTop();

  $(window).on('scroll.scrolldisabler', function(event) {
    $(window).scrollTop(oldScrollPos);
    event.preventDefault();
  });
}, function() {
  $(window).off('scroll.scrolldisabler');
});

Check it out.

edited May 23 '17 at 12:22

Community

1
1

answered Feb 01 '16 at 15:27

TheOnlyError

1,441
12
19

No problemo, my pleasure :) – TheOnlyError Feb 01 '16 at 16:27

Haryono · Answer 2 · 2018-03-20T23:15:00.843

For me, hopefully can work

        $('body').on('mousewheel', '.someDIVClass', (e: any) => {    
            if (e.originalEvent.wheelDelta / 120 > 0) {
                // You can get scroll value here to do other things
            }
            else {
                // You can get scroll value here to do  other things
            }    

            // This will prevent window to scroll
            e.preventDefault();
            e.stopPropagation();    
        });

How to restrict scrolling to the div that mouse is currently hovering?

2 Answers2