There is a fixed positioning div and overflow: auto . In the block scrolls the text with the mouse wheel. After all the text in the block is scrolled, the page starts to scroll. How to disable scrolling of the body while the cursor is in the div-е ?

  • one
    I am always interested in such questions WHY? that's what it interferes with? sorry for offtopic. - xaja
  • 2
    If it were not necessary, I probably would not have asked. - Frontender
  • Well, difficult to answer? are you waiting for some kind of answer from people, but you yourself can't?) Well, I wonder if it is necessary - xaja
  • The essence is as follows. In the menu diva odnostranichniku. When you click on a particular item, the page scrolls. And when you scroll the page manually, the menu items scroll in the diva so that the active item is at the very top of the visible area. Well, it turns out that when scrolling through the page, the js-function will twist the text in the diva. - Frontender

1 answer 1

When hovering on a div set the overflow value of the body to hidden .

 $('#div').on('mouseenter', function (event) { $("body").css("overflow","hidden"); }).on('mouseleave', function(){ $("body").css("overflow","auto"); }); 
 body{ height:1500px; } #div { width:200px; height:200px; background: #333; overflow: auto } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div"> </div>

Jsfiddle example

Added by:

such a solution is proposed by colleagues from English. version . True, as noted by @Rolandius there are compatibility issues.

 $('#div').bind('mousewheel DOMMouseScroll', function(e) { var scrollTo = null; if (e.type == 'mousewheel') { scrollTo = (e.originalEvent.wheelDelta * -1); } else if (e.type == 'DOMMouseScroll') { scrollTo = 40 * e.originalEvent.detail; } if (scrollTo) { e.preventDefault(); $(this).scrollTop(scrollTo + $(this).scrollTop()); } });

Example in work: jsfiddle

  • Is there any other option? I considered this option, it does not fit, as the content moves. But even if you add a margin for the body, it doesn't look good. You need to leave the scroll bar. - Frontender
  • one
    Scrolling a document can still be activated with arrows on the keyboard and a space, and the DOMMouseScroll itself DOMMouseScroll not work everywhere . Too difficult to succeed. - Rolandius
  • It is necessary to limit the scrolling only wheel. - Frontender
  • @Viktor Pavlov updated the answer - Alexander Igorevich