如何在 JavaScript 中暂时禁用滚动以获得更好的用户体验？

在 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中文网其他相关文章！