JavaScript是一种网络语言，用于创建动态网页并使其与用户互动。通过JavaScript，我们可以执行各种功能，改变HTML元素的CSS，在每次点击时执行动作等等。JavaScript使我们网站的页面更加互动，并为其添加动态行为，我们可以创建各种菜单、下拉菜单、滚动条等。我们甚至可以用JavaScript启用和禁用这些组件的行为。在这篇文章中，我们将看到如何使用JavaScript来禁用网页上的滚动功能。
禁用网页上的滚动功能
网页上的滚动可以很容易地通过各种方式用JavaScript禁用，但在这篇文章中，我们只看到两种禁用的方法，它们列在下面。
- 方法一：通过重写window.onscroll函数
- 方法2：通过设置主体的高度为100%，溢出为隐藏。
为了更好地演示和理解，下面将对这些方法逐一进行解释，并举例说明。
通过重写window.onscroll函数
window.onscroll事件是在窗口被滚动时触发的，因此覆盖并将该函数设置为一个固定的值将禁用你的网页的滚动效果。
你可以通过 window.pageYOffset和document.documentElement.scrollTop找到当前的滚动位置，这两个函数将返回当前的Y滚动值。这两个是使用OR逻辑运算符"||"一起使用的，因为其中一个可能在某些浏览器上返回0。
现在，为了找到X滚动的值，我们可以使用 window.pageXOffset和document.documentElement.scrollLeft，它们的用法与Y滚动类似，使用or运算符，它们返回网页的X滚动值。
在这之后，我们将使用 window.scrollTo()和上述两个值来将你的网页的滚动位置设置为该值。你可以通过覆盖window.onscroll函数来启用回滚功能，使其成为一个空白函数。
下面是提供的使用该方法禁用网页滚动的代码。
HTML：
<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：
functiondisable() {
// 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() {};
}
输出：
通过设置主体的高度为100%，溢出为隐藏
在这个方法中，我们使用CSS来禁止网页上的滚动。在CSS类中，我们将高度设置为100%，然后将overflow属性设置为hidden，这就使网页的滚动条失效。
**document.body.classList.add("classname")方法被用来将类名添加到body元素中，从而禁止滚动。为了使滚动功能恢复，使用document.body.classList.remove("classname")**方法将类从该方法中移除。
HTML：
<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：
<script>
functiondisable() {
document.body.classList.add("stop-scrolling");
}
functionenable() {
document.body.classList.remove("stop-scrolling");
</script>
输出：
结论
JavaScript被用于各种目的，如创建输入框、导航条、点击事件动作等。通过JavaScript，我们也可以启用和禁用我们网页上的各种组件的动作。在这篇文章中，我们讨论了如何用JavaScript来禁止网页上的滚动，并讨论了两种不同的方法，并附有例子和代码，以便更好地理解你的想法。这两种方法都很容易使用，可以帮助用户轻松禁用滚动条。
