How to disable scrolling temporarily?

Directions in depth

Managing touch devices scrolling

To prevent scrolling on touch-screen devices, handle touchmove events:

const preventDefault = (e) => e.preventDefault();
const disableScroll = () => document.addEventListener('touchmove', preventDefault, { passive: false }); // "No scrolling, on my watch!"
const enableScroll = () => document.removeEventListener('touchmove', preventDefault, { passive: false }); // "Time for some scrolling action!"

disableScroll();  // Scroll disabled
enableScroll();   // Scroll enabled


Important: Use { passive: false } to successfully prevent the default touch behavior.

Keeping hold of the scroll position

While toggling scrolling, it might be crucial to save the scroll position. This is how you achieve it:

let scrollPosition = 0;

const disableScroll = () => {
  scrollPosition = window.pageYOffset; // Remember where we parked!
  document.body.style.overflow = 'hidden';
  document.body.style.position = 'fixed'; // Stand right there!
  document.body.style.top = `-${scrollPosition}px`; // Keep in mind the position
};

const enableScroll = () => {
  document.body.style.overflow = '';
  document.body.style.position = '';
  document.body.style.top = '';
  window.scrollTo(0, scrollPosition); // And we're back!
};


Creating a scrollbar doppelgänger

Prevent UI shift when the scrollbar vanishes by deploying a fake one:

const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
document.body.style.overflow = 'hidden';
document.body.style.paddingRight = `${scrollbarWidth}px`; // Fake scrollbar aka scrollbar's secret twin in action


Beyond the Basics

Fluid overflow control

Have a situation where you need to control overflow dynamically, like after an animation or page transition? Here you go:

function afterAnimation() {
  document.body.style.overflow = 'auto'; // "Break over, everybody back to work!"
}

// Start your animation and restore scroll after
myAnimation().then(afterAnimation);


Handling fussy browsers

Older browsers like IE6 might require alternative methods or polyfills to manage scrolling. Just in case, here's an IE6-friendly approach:

// For IE6
window.onload = function() {
  document.body.scroll = "no"; // "Scrolling? IE6 says it's overrated!"
};


It's critical to validate your solutions across all browsers and devices to ensure it works as expected.

Extra considerations

Preventing scroll chaining

For nested scrollable components, a sly trick is to use overscroll-behavior to tackle scroll chaining:

.scrollable-element {
  overscroll-behavior: contain; // "You shall not pass!" says Gandalf to scroll propagation
}


Minding performance

Overriding scrolls can impact the user experience and performance. Use judiciously and, as always, think about accessibility and usability.