如何在 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中文網其他相關文章！