如何停止滚动

Question

How can I prevent the page from sliding? Let say:

 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> 

The idea here is that while I am not rolling the wheel of the mouse, it should not be scrolling. Sometimes if you do it too fast it continues scrolling for a while.
How can I prevent this?

Using -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> 

It is not working as I expected, maybe I'm using it wrong?

Answer 1

You can do it with css

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

Just add property -webkit-overflow-scrolling: auto to your body .

Answer 2

I can't really test this, but does return false on the scroll event prevent the scroll?

 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>