How to Disable Scrolling in HTML/JavaScript

By default, long HTML pages and DOM elements require scrolling and it is automatically supported by web browsers. But sometimes you may need to disable scrolling in HTML. In this article, we will learn how to disable scrolling in HTML/JavaScript.

How to Disable Scrolling in HTML/JavaScript

You can disable scrolling via HTML as well as JavaScript. We will look at both these approaches.

1. Using HTML/CSS

You can easily disable scrolling on your HTML page by adding the following CSS to your web page’s CSS stylesheet.

html, body {margin: 0; height: 100%; overflow: hidden}

The CSS property ‘overflow’ controls the scrolling behavior.

Alternatively, you can add inline CSS to body tag as shown below.

<body scroll="no" style="overflow: hidden">

If you want to disable scrolling only for a specific element (e.g. div) such as id=myDiv, you can add the following CSS to your page.

#myDiv {margin: 0; height: 100%; overflow: hidden}

You can also add the above CSS inline as shown.

<div id="myDiv" scroll="no" style="overflow: hidden">
  ...
</div>

2. Using JavaScript

You can also use JavaScript to disable interaction events such as Mouse and Touch Scroll & buttons associated with scrolling. In the following code, we first disable keys such as pageup, pagedown, up, down that are generally associated with scrolling, by defining function preventDefaultForScrollKeys. We define disableScroll() function to disable scrolling events associated with Mouse & Touch.

// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

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

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

// 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
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);
}

The preventDefaultForScrollKeys() function checks the key code generated whenever a key is pressed and if it is one of the scroll-based keys. If so, it disables scrolling. Function disableScroll() adds event listeners to commonly used scroll events and disables them.

In this article, we have learnt how to disable scrolling in HTML using CSS and JavaScript. It is useful if you want to restrict user interaction to a specific page or DOM element, and prevent unnecessary scrolling.

How to Disable Scrolling in HTML/JavaScript