如何在 jQuery 動畫期間暫時停用視窗滾動？

暫時停用視窗捲動

使用scrollTo jQuery 外掛時，防止動畫期間不必要的捲動對於無縫用戶體驗至關重要。雖然一種選擇是切換正文溢出，但更精細的方法是在保持其可見性的同時停用捲軸。

解決方案：取消捲動互動

捲動事件本身無法取消。相反，請考慮防止觸發滾動的特定交互，包括：

• 滑鼠和觸控滾動（適用於行動裝置）
• 與滾動相關的鍵盤按鈕（例如箭頭鍵、向上翻頁/ down, home, end)

實作

以下JavaScript程式碼實現這一點：

// Prevent scroll events
function disableScroll() {
  // Add event listeners for various scroll interactions
  window.addEventListener('DOMMouseScroll', preventDefault, false); // Older Firefox
  window.addEventListener('wheel', preventDefault, { passive: false }); // Modern desktop
  window.addEventListener('touchmove', preventDefault, { passive: false }); // Mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false); // Keyboard
}

// Re-enable scroll events
function enableScroll() {
  // Remove event listeners for scroll interactions
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener('wheel', preventDefault, { passive: false });
  window.removeEventListener('touchmove', preventDefault, { passive: false });
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Function to prevent event default action
function preventDefault(e) {
  e.preventDefault();
}

// Function to prevent default for specific keyboard scroll keys
function preventDefaultForScrollKeys(e) {
  const scrollKeys = [37, 38, 39, 40]; // Arrow keys
  if (scrollKeys.includes(e.keyCode)) {
    e.preventDefault();
  }
}

要停用滾動，請呼叫disableScroll();要重新啟用它，請呼叫enableScroll()。

以上是如何在 jQuery 動畫期間暫時停用視窗滾動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！