Disable Scrolling on a Webpage
The scrolling on web pages can be easily disabled using JavaScript through various ways but in this article we’ll only see two ways to disable it which are listed below:
- Method 1: By overriding the window.onscroll function
- Method 2: By setting the height of the body to 100% and overflow to hidden
Each of these methods are explained below along with examples for better demonstration and your understanding.
By overriding the window.onscroll function
The event window.onscroll is fired when the window has been scrolled, thus overriding and setting the function to a fixed value will disable the scroll effect for your webpage.
You can find the current position of scroll from top through window.pageYOffset and document.documentElement.scrollTop, both of which will return the current value of Y scroll. These two are used together using the OR logical operator “||” as one of them might return 0 on some browsers.
Now, in order to find the value of X scroll we can use window.pageXOffset and the document.documentElement.scrollLeft which are used similarly as Y scroll, using or operator and they return the value for X scroll of the webpage.
Now after this we’ll use window.scrollTo() along with the two above values to set the scroll position of your webpage to that value. You can enable the scrolling back by overriding the window.onscroll function to blank a blank function.
Below is the code provided for disabling the scrolling of webpage using this method:
HTML:
<head>
<title>How to disable scrolling using JavaScript?</title>
<style>
.scrollable-place {
height: 3000px;
}
</style>
</head>
<body>
<h1 style="color:blue">
Welcome To Our Website
</h1>
<p>Click the buttons below to enable or disable scrolling.</p>
<p class="scrollable-place">
<button>Disable Scrolling</button>
<button>Enable Scrolling</button>
</p>
</body>
</html>
JavaScript:
// To get the scroll position of current webpage
TopScroll = window.pageYOffset || document.documentElement.scrollTop;
LeftScroll = window.pageXOffset || document.documentElement.scrollLeft,
// if scroll happens, set it to the previous value
window.onscroll = function() {
window.scrollTo(LeftScroll, TopScroll);
};
}
functionenable() {
window.onscroll = function() {};
}
Output:
By setting the height of the body to 100% and overflow to hidden
In this method we use CSS to disable the scrolling on web pages. In CSS class we set the height to 100% and then we set the overflow property to hidden which disables the scroll bar of the webpage.
The method document.body.classList.add(“classname”) is used to add the class name to the body element and hence disabling the scrolling. To enable the scrolling back the class is removed from the method using document.body.classList.remove(“classname”).
HTML:
<head>
<title>How to disable scrolling using JavaScript?</title>
<style>
.scrollable-place {
height: 3000px;
}
.stop-scrolling {
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<h1 style="color: blue">Welcome To Our Website</h1>
<p>Click the buttons below to enable or disable scrolling.</p>
<p class="scrollable-place">
<button>Disable Scrolling</button>
<button>Enable Scrolling</button>
</p>
</body>
</html>
JavaScript:
functiondisable() {
document.body.classList.add("stop-scrolling");
}
functionenable() {
document.body.classList.remove("stop-scrolling");
</script>
Output:
Conclusion
JavaScript is used for various purposes such as creating input boxes, navigation bars, on click events actions etc. Through JavaScript we can also enable and disable the action of various components on our webpage. In this article we discussed how to disable scrolling on a webpage with JavaScript and discussed two different methods along with examples and code for better understanding of yours. Both these methods are easily used and can help users to disable the scroll bar easily.
