How to Disable Scrolling in JavaScript

1. Scrolling in JavaScript
2. Use scrollTo() to Disable Scrolling in JavaScript

In today’s article, we’ll look at how to disable scroll events using pure JavaScript.

Scrolling in JavaScript

Scrolling is the act of moving text from right to left or up and down on a screen to display text that cannot be contained in a single display image. Scrolling is the vertical or horizontal sliding motion of an image, video, or text across a screen.

Scrolling can be done in both directions, with or without user intervention. Most apps and smart devices offer this feature, allowing you to display too large content to completely fit on the screen.

It is considered one of the basic methods of navigation.

Scrolling is typically done with a mouse (often with a built-in scroll wheel) or a trackpad on desktop and laptop computers. On mobile devices, you typically use a finger or stylus to scroll.

Use scrollTo() to Disable Scrolling in JavaScript

Window.scrollTo() is an in-built method provided by JavaScript that scrolls to a particular set of coordinates in the document.

Syntax:

window.scrollTo(x - cord, y - cord)
window.scrollTo(options)

The x-cord coordinates along the horizontal axis of the document that you want to appear at the top left. The y-cord coordinates along the vertical axis of the document you want to display at the top left.

As an option, the scrollTo function takes the following parameters.

1. The top attribute specifies the number of pixels along the Y-axis to scroll the window or element.
2. The left attribute specifies the number of pixels along the X-axis to scroll the window or element.
3. The behavior attribute specifies whether scrolling should be animated smoothly (soft) or whether it should occur instantly in a single jump (auto is the default).

Find more information in the documentation for the window.scrollTo().

Let’s have an example with 2 buttons, one will enable the scrolling, and another will disable the scrolling. You can call this feature according to your needs once the content is rendered.

Example:

<button type="button" id="disabled">Disable scrolling</button>
<button type="button" id="enabled">Enable scrolling</button>
<div>scroll The page</div>

div {
  background-color: #f0f0f0;
  height: 150vh;
  line-height: 150vh;
  text-align: center;
}

function scrollEvent() {
  window.scrollTo(0, 0)
}

disabled.addEventListener(
    'click', () => {window.addEventListener('scroll', scrollEvent)})

enabled.addEventListener(
    'click', () => {window.removeEventListener('scroll', scrollEvent)})

The addEventListener() is an integrated method that JavaScript provides. This method registers an event listener. It is a method of the EventTarget interface.

Whenever the specified event is detected on the target, our configured function is called.

We are attaching 2 event listeners that listen to the button’s click event. Once the user clicks on the disable button, we will scroll to the upper left position, and it will always be true for that.

Once the user clicks on the enabled button, we remove the event listener, which listens to the scroll event, and coordinates are free to move.

Output: