如何停止滚动

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/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling

只需将属性-webkit-overflow-scrolling: auto到您的body 。

Answer 2

我不能真正测试一下，但是在滚动事件上返回false会阻止滚动吗？

 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"); } 

 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>