Prevent page scrolling when scrolling a div element

Question

I already found the solution in the accepted answer here:

How to prevent page scrolling while scrolling a div element?

But you also need to disable the scrolling of the main page on the keys (when the contents of the div cannot scroll anymore).

I am trying to do something like this, but it does not work:

$( '.div-scroll' ).bind( 'keydown mousewheel DOMMouseScroll', function ( e ) { var e0 = e.originalEvent, delta = e0.wheelDelta || -e0.detail; this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault(); } e.preventDefault(); }); 

Any ideas why?

Answer 1

You can stop scrolling the entire page by following these steps:

Method 1

 <div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div> 

but it makes the browser scrollbar disappear whenever you hover over a div.

Method 2

Otherwise, you can look at jquery-mousewheel.

 var toolbox = $('#toolbox'), height = toolbox.height(), scrollHeight = toolbox.get(0).scrollHeight; toolbox.off("mousewheel").on("mousewheel", function (event) { var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0; return !blockScrolling; }); 

Demo

Method 3

To stop distribution without plugins.

HTML

 <div class="Scrollable"> <!-- A bunch of HTML here which will create scrolling --> </div> 

Js

 $('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) { var $this = $(this), scrollTop = this.scrollTop, scrollHeight = this.scrollHeight, height = $this.height(), delta = (ev.type == 'DOMMouseScroll' ? ev.originalEvent.detail * -40 : ev.originalEvent.wheelDelta), up = delta > 0; var prevent = function() { ev.stopPropagation(); ev.preventDefault(); ev.returnValue = false; return false; } if (!up && -delta > scrollHeight - height - scrollTop) { // Scrolling down, but this will take us past the bottom. $this.scrollTop(scrollHeight); return prevent(); } else if (up && delta > scrollTop) { // Scrolling up, but this will take us past the top. $this.scrollTop(0); return prevent(); } }); 

Method 4

you can do this by canceling these interaction events:

Mouse and touch scrolling and buttons related to scrolling.

 // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 var keys = {37: 1, 38: 1, 39: 1, 40: 1}; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue = false; } function preventDefaultForScrollKeys(e) { if (keys[e.keyCode]) { preventDefault(e); return false; } } function disableScroll() { if (window.addEventListener) // older FF window.addEventListener('DOMMouseScroll', preventDefault, false); window.onwheel = preventDefault; // modern standard window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE window.ontouchmove = preventDefault; // mobile document.onkeydown = preventDefaultForScrollKeys; } function enableScroll() { if (window.removeEventListener) window.removeEventListener('DOMMouseScroll', preventDefault, false); window.onmousewheel = document.onmousewheel = null; window.onwheel = null; window.ontouchmove = null; document.onkeydown = null; } 

Answer 2

You need to bind the document to the "keydown" event as follows:

 $( document ).bind( 'keydown', function (e) { ... e.preventDefault(); } 

Answer 3

This code blocks scrolling with the keys:

 $(document).keydown(function(e) { if (e.keyCode === 32 || e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) { return false; } });