How to disable scrolling in external elements?

Question

I have a vertically scrollable div inside the page that also scrolls vertically.

When the child div scrolls with the mouse wheel and reaches the top or bottom of the scrollbar, the page (body) starts to scroll. While the mouse is above the child div, I would like the page (body) to scroll to be locked.

This SO post (scroll down to the selected answer) shows the problem well.

This SO question is essentially the same as mine, but the selected answer causes my page content to shift noticeably horizontally when the scroll bar disappears and reappears.

I thought there might be a solution that uses event.stopPropagation () but cannot make anything work. In ActionScript, this solution will be resolved by placing the mousewheel handler on the child div that raises the stopPropagation () event in the event before it reaches the body element. Since JS and AS are ECMAScript languages, I thought the concept could be translated, but it doesn't seem to work.

Is there a solution that prevents the movement of the contents of my page? Most likely using stopPropagation instead of fixing CSS? JQuery answers are welcome, as is pure JS.

Answer 1

that's what i ended up with. very similar to @mrtsherman, answer here , only pure JS events instead of jQuery. I still used jQuery to select and move the child div around.

// earlier, i have code that references my child div, as childDiv function disableWindowScroll () { if (window.addEventListener) { window.addEventListener("DOMMouseScroll", onChildMouseWheel, false); } window.onmousewheel = document.onmousewheel = onChildMouseWheel; } function enableWindowScroll () { if (window.removeEventListener) { window.removeEventListener("DOMMouseScroll", onArticleMouseWheel, false); } window.onmousewheel = document.onmousewheel = null; } function onChildMouseWheel (event) { var scrollTgt = 0; event = window.event || event; if (event.detail) { scrollTgt = -40 * event.detail; } else { scrollTgt = event.wheelDeltaY; } if (scrollTgt) { preventDefault(event); $(childDiv).scrollTop($(childDiv).scrollTop() - scrollTgt); } } function preventDefault (event) { event = event || window.event; if (event.preventDefault) { event.preventDefault(); } event.returnValue = false; } 

I noticed that scrolling does not match normal scrolling; it seems to scroll a little faster than without this code. I suppose I can fix it by knocking down the DeltaY wheel a bit, but it’s strange that javascript will report differently than what the browser actually implemented ...

Answer 2

Usually I do this with a little hack, listening to the document scroll event: it resets the scroll height back to the original one - actually freezing the document from scrolling, but any internal element with overflow: the car will still scroll beautifully:

 var scrollTop = $(document).scrollTop(); $(document).on('scroll.scrollLock', function() { $(document).scrollTop(scrollTop); }); 

and then when I finished with internal scroll lock:

 $(document).off('scroll.scrollLock'); 

the .scrollLock event namespace ensures that I will not bother with other scroll event listeners.

Answer 3

Although this is an old question, here is how I do it using jQuery. This allows you to scroll through the list in the external list, or you can change the external list in the document to do what the OP requested.

 window.scrollLockHolder = null; function lockScroll(id){ if (window.scrollLockHolder == null){ window.scrollLockHolder = $('#' + id).scrollTop(); } $('#' + id).on('scroll', function(){ $('#' + id).scrollTop(window.scrollLockHolder); }); } function unlockScroll(id){ $('#' + id).off('scroll'); window.scrollLockHolder = null; } 

And you can use it as follows:

 <ul onmousemove="lockScroll('outer-scroller-id')" onmouseout="unlockScroll('outer-scroller-id')"> <li>...</li> <li>...</li> </ul> 

Answer 4

what about it:

 div.onmousemove = function() { // may be onmouseover also works fine document.body.style.overflow = "hidden"; document.documentElement.style.overflow = "hidden"; }; div.onmouseout = function() { document.body.style.overflow = "auto"; document.documentElement.style.overflow = "auto"; };