如何停止滾動

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>