javascript - 如何使用 Javascript 启用/禁用鼠标滚动

Question

我一直在尝试使用 javascript 启用/禁用滚动，

我设法禁用了滚动，但未能将其恢复到工作状态，

所以我试过的是:

 function noscroll() {
    window.scrollTo(0, 0);
}

然后我尝试使用以下代码行添加和删除滚动

 window.removeEventListener("scroll", noscroll);

 window.addEventListener("scroll", noscroll);

非常感谢任何帮助

Answer 1

您的方法似乎有效，如下所示:

function noscroll() {
  window.scrollTo(0, 0);
}

document.getElementById('enable').addEventListener('click', () => {
  window.removeEventListener("scroll", noscroll);
});
 
document.getElementById('disable').addEventListener('click', () => {
  window.addEventListener("scroll", noscroll);  
});

div {
  background:pink;
  height:1000px;
  padding:50px;
}

header {
  position:fixed;
  top:0;
  left:0;
  z-index:1;
}

<header>
<button id="enable">Enable scrolling</button>
<button id="disable">Disable scrolling</button>
</header>
<div>
Prevent scroll via Javascript (window.scrollTo)
</div>

另一种值得考虑的方法是通过“隐藏”任何内容溢出来更新 document.body 元素的 overflow 属性。这具有删除滚动条的副作用，这反过来会阻止滚动:

 document.getElementById('enable').addEventListener('click', () => {

    // Remove overflow value from document body to restore default scrolling
    document.body.style.overflow = '';
 })

 document.getElementById('disable').addEventListener('click', () => {
    // When scrolling is disabled, auto scroll to top of screen
    window.scrollTo(0, 0);

    // Apply overflow:hidden to document body to prevent scrolling
    document.body.style.overflow = 'hidden';
 })

div {
  background:pink;
  height:1000px;
  padding:50px;
}

header {
  position:fixed;
  top:0;
  left:0;
  z-index:1;
}

<header>
<button id="enable">Enable scrolling</button>
<button id="disable">Disable scrolling</button>
</header>
<div>
Prevent scroll via CSS
</div>

上面显示的基于 CSS 的方法的主要优点是它不受“抖动”滚动行为的影响，而这种行为在以前的“纯 javascript”方法中很明显。