Question

如何防止页面滑动？让我们说：

let timeout = 0;
document.onmousewheel = () => {
 window.clearTimeout(timeout);
 timeout = setTimeout(() => {
  console.log("Stop scrolling");
 }, 20);
}
document.onscroll = () => {
 console.log("scrolling");
}

p {
 height: 300px;
}

<p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p>

这里的想法是，虽然我不是滚动鼠标滚轮，但它不应该滚动。有时如果你做得太快，它会继续滚动一段时间我该如何防止这种情况？

使用-webkit-overflow-scrolling：

let timeout = 0;
document.onmousewheel = () => {
 window.clearTimeout(timeout);
 timeout = setTimeout(() => {
  console.log("Stop scrolling");
 }, 20);
}
document.onscroll = () => {
 console.log("scrolling");
}

p {
 height: 300px;
}
body {
 -webkit-overflow-scrolling: auto;
}

<p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p>

它没有按照我的预期工作，也许我使用它错了？

Answer 1

你可以用css

来做

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

只需将属性-webkit-overflow-scrolling: auto添加到body。

Answer 2

我无法对此进行测试，但在滚动事件中返回false会阻止滚动吗？

＆＃13;

var timeout = 0, doScroll;
document.onmousewheel = function() {
 doScroll = 1;
 window.clearTimeout(timeout);
 timeout = setTimeout( function() {
  console.log("Stop scrolling");
  doScroll = 0;
 }, 20);
}
document.onscroll = function() {
 if (doScroll == 0) return false;
 console.log("scrolling");
}

＆＃13;

p {
 height: 300px;
}

＆＃13;

<p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p><p> Sample </p>

＆＃13;

如何停止滚动

2 个答案: