Scrolling child div scrolls the window, how do I stop that?

javascript

scrolling-behavior

event-listeners

performance-optimization

byAnton Shumikhin·Mar 5, 2025

Prevent a child div from causing the window to scroll by halting the propagation of the scroll event. A JavaScript snippet bound to the wheel event on the scrollable div does the trick:

let scrollable = document.querySelector('.scrollable');
scrollable.addEventListener('wheel', (event) => {
  let { deltaY, currentTarget } = event;
  let isTop = currentTarget.scrollTop === 0;
  let isBottom =
    currentTarget.scrollTop + currentTarget.clientHeight >=
    currentTarget.scrollHeight;

  if ((deltaY < 0 && isTop) || (deltaY > 0 && isBottom)) event.preventDefault();
  // If scrolled to the edge, stop rolling. You've reached the end of the internet!
});

This works when .scrollable has its overflow-y set to auto or scroll.

.scrollable { overflow-y: auto; }

Window scroll happens no more when the div's limit is reached, safeguarding a neat user interface.

Playing safe with JavaScript

Use JavaScript to manage nested scrolling behaviors for a more streamlined user interaction with a scrollable child div.

Scrolling ends, not the world!

For detecting the end of scrolling, let JavaScript do the magic.

function detectScrollEnd(event) {
  var element = event.target;
  var maxScroll = element.scrollHeight - element.clientHeight;
  
  if ((event.deltaY > 0 && element.scrollTop >= maxScroll) ||
      (event.deltaY < 0 && element.scrollTop <= 0)) {
    event.preventDefault();
    // So we're scrolling, Endgame?
  }
}
scrollableDiv.addEventListener('wheel', detectScrollEnd);

Commanding the scroll direction

Conditional Logic in three... two... one... it's scroll control time!

function scrollGuard2(event) {
  let { deltaY, currentTarget: div } = event;
  let maxScrollTop = div.scrollHeight - div.clientHeight;

  if ((deltaY > 0 && div.scrollTop < maxScrollTop) ||
      (deltaY < 0 && div.scrollTop > 0)) {
    // Allow scroll
  } else {
    // Upstairs, downstairs, it's a tough choice!
    event.preventDefault();
  }
}
scrollableDiv.addEventListener('wheel', scrollGuard2);

They see me scrolling, they hatin'

The touchmove event listener with passive:false lets you put your foot down for all scrolling drama on touch devices.

scrollableDiv.addEventListener('touchmove', (event) => {
  // Ring, Ring! It's your div calling to stop the window scroll.
}, { passive: false });

Overflow, not overboard!

Control the overflowing enthusiasm of your body element with a toggle function.

function toggleBodyScroll(isEnabled) {
  document.body.style.overflow = isEnabled ? 'auto' : 'hidden';
  // "To scroll or not to scroll, that is the question." - Scrollspeare
}

Don't miss these!

Compatibility is key

Ensure your solution is behaving like a good kid, consistent and friendly, across browsers and platforms, including old school ones and touch devices.

Up-to-date, always!

Keep your skills and knowledge fresh. Deprecated event handlers are as cool as yesterday's bread. Stay updated, switching to modern methods is your style.

Performance, the real king!

Be careful with scroll events: messing with DOM too much can harm web performance. Keep scrolling smooth as butter, and use techniques like throttling or debouncing for heavy tasks.

explain-codes / Javascript / Scrolling child div scrolls the window, how do I stop that?

Linked

Javascript: detect scroll end



Detecting when user scrolls to bottom of div with jQuery



Change Active Menu Item on Page Scroll?



Event to detect when position:sticky is triggered



Scrollintoview() causing the whole page to move

