Disabling Scrolling Temporarily

Disabling scrolling temporarily can be useful in various scenarios, such as during animations or when displaying modal windows. In this tutorial, we will explore different methods to achieve this.

Understanding Scrolling Events

Before diving into the solutions, it’s essential to understand how scrolling events work. When a user scrolls, the browser triggers a scroll event on the window object. However, this event cannot be canceled directly. Instead, we need to prevent the default behavior of other events that trigger scrolling, such as mouse wheel events, touch move events, and keydown events.

Method 1: Preventing Default Behavior

One way to disable scrolling is by preventing the default behavior of these events. We can use the preventDefault() method to achieve this.

function preventDefault(e) {
  e.preventDefault();
}

// Modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
  window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
    get: function () { supportsPassive = true; } 
  }));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// Call this to disable scrolling
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // Older FF
  window.addEventListener(wheelEvent, preventDefault, wheelOpt); // Modern desktop
  window.addEventListener('touchmove', preventDefault, wheelOpt); // Mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Call this to enable scrolling
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt); 
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Helper function to prevent default behavior for scroll keys
function preventDefaultForScrollKeys(e) {
  var keys = {37: 1, 38: 1, 39: 1, 40: 1}; // Left, up, right, down arrow keys
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

Method 2: Using CSS to Hide Overflow

Another approach is to add a class to the body element that hides the overflow.

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

You can then add or remove this class using JavaScript:

document.body.classList.add('stop-scrolling'); // Disable scrolling
document.body.classList.remove('stop-scrolling'); // Enable scrolling

Method 3: Setting window.onscroll

A simple way to disable scrolling is by setting the window.onscroll property to a function that scrolls back to the original position.

window.onscroll = function () { window.scrollTo(0, 0); };

However, this method can be jumpy in older browsers.

Method 4: Pure JavaScript Solution

Here’s a basic pure JavaScript solution:

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}

function enableScrolling(){
    window.onscroll=function(){};
}

Method 5: Creating a Fake Scrollbar

If you want to display a scrollbar while disabling scrolling, you can create a fake scrollbar using CSS and JavaScript.

#scrollbar {
  overflow-y: scroll;
  top: 0;
  right: 0;
  display: none;
  height: 100%;
  position: fixed;
}

You can then display the fake scrollbar while adding overflow: hidden to the body:

function disableScroll() {
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

In conclusion, there are several ways to disable scrolling temporarily, each with its own advantages and disadvantages. By understanding how scrolling events work and using the right method for your use case, you can achieve a seamless user experience.