How Can I Temporarily Disable Scrolling in JavaScript While Maintaining Scrollbar Visibility?

<br>// Prevent scroll event<br>function preventDefault(e) {<br>  e.preventDefault();<br>}</p>
<p>// Prevent keys associated with scrolling<br>function preventDefaultForScrollKeys(e) {<br>  if (keys[e.keyCode]) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">preventDefault(e);
return false;

}
}

// Dict for scroll key codes
const keys = {37: 1, 38: 1, 39: 1, 40: 1};

// Disable scrolling
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
window.addEventListener('wheel', preventDefault, { passive: false }); // modern desktop
window.addEventListener('touchmove', preventDefault, { passive: false }); // mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Enable scrolling
function enableScroll() {
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener('wheel', preventDefault, { passive: false });
window.removeEventListener('touchmove', preventDefault, { passive: false });
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

To disable scrolling, simply call the disableScroll() function. To enable scrolling again, call the enableScroll() function.

The above is the detailed content of How Can I Temporarily Disable Scrolling in JavaScript While Maintaining Scrollbar Visibility?. For more information, please follow other related articles on the PHP Chinese website!