How Can I Temporarily Disable Scrolling in JavaScript for a Better User Experience?

Disable Scrolling Temporarily in Javascript for a Seamless User Experience

Temporary suspension of scrolling can enhance the user experience when working with animations, such as the jQuery scrollTo plugin. While disabling scrolling entirely may seem like a straightforward solution, maintaining the visibility of the scrollbar while preventing interaction offers a more elegant approach.

To achieve this, we will focus on canceling interaction events associated with both mouse and touch scrolling, including keyboard buttons.

[Working Demo]

// Event Codes for Navigation Keys
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

// Prevent Default Scrolling
function preventDefault(e) {
  e.preventDefault();
}

// Cancel Scrolling for Navigation Keys
function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

// Disable Scrolling
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // Firefox
  window.addEventListener('wheel', preventDefault, false); // Desktop
  window.addEventListener('touchmove', preventDefault, false); // Mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false); // Keyboard
}

// Enable Scrolling
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener('wheel', preventDefault, false); 
  window.removeEventListener('touchmove', preventDefault, false);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

By calling disableScroll(), we effectively prevent scrolling while the scrollTo animation is in progress. Once the animation is complete, enableScroll() can be used to restore scrolling functionality.

Update: Enhanced Support

This solution has been updated to work seamlessly on modern mobile browsers and Chrome desktop. Passive listeners are now incorporated to maintain performance and user responsiveness.

The above is the detailed content of How Can I Temporarily Disable Scrolling in JavaScript for a Better User Experience?. For more information, please follow other related articles on the PHP Chinese website!