在 Javascript 中临时禁用滚动以获得无缝的用户体验
临时暂停滚动可以增强使用动画时的用户体验，例如jQuery的scrollTo插件。虽然完全禁用滚动似乎是一个简单的解决方案，但在防止交互的同时保持滚动条的可见性提供了一种更优雅的方法。
为了实现这一点，我们将重点关注取消关联的交互事件可以使用鼠标和触摸滚动，包括键盘按钮。
[工作中演示]
// Event Codes for Navigation Keys
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
// Prevent Default Scrolling
function preventDefault(e) {
e.preventDefault();
}
// Cancel Scrolling for Navigation Keys
function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}
// Disable Scrolling
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); // Firefox
window.addEventListener('wheel', preventDefault, false); // Desktop
window.addEventListener('touchmove', preventDefault, false); // Mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false); // Keyboard
}
// Enable Scrolling
function enableScroll() {
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener('wheel', preventDefault, false);
window.removeEventListener('touchmove', preventDefault, false);
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}通过调用disableScroll()，我们可以有效地防止scrollTo动画进行时滚动。动画完成后，enableScroll() 可用于恢复滚动功能。
更新：增强支持
此解决方案已更新，可以在现代移动设备上无缝工作浏览器和 Chrome 桌面。现在合并被动监听器以维持性能和用户响应能力。
以上是如何在 JavaScript 中暂时禁用滚动以获得更好的用户体验？的详细内容。更多信息请关注PHP中文网其他相关文章！
