Wie kann ich das Scrollen von Fenstern während jQuery-Animationen vorübergehend deaktivieren?

Vorübergehendes Deaktivieren des Fensterscrollens

Bei Verwendung des jQuery-Plugins scrollTo ist es für ein nahtloses Benutzererlebnis unerlässlich, unerwünschtes Scrollen während der Animation zu verhindern. Während eine Möglichkeit darin besteht, den Textüberlauf auszuschalten, besteht ein raffinierterer Ansatz darin, die Bildlaufleiste zu deaktivieren und gleichzeitig ihre Sichtbarkeit beizubehalten.

Lösung: Scroll-Interaktionen abbrechen

Das Scroll-Ereignis selbst kann nicht abgebrochen werden. Ziehen Sie stattdessen in Betracht, bestimmte Interaktionen zu verhindern, die das Scrollen auslösen, einschließlich:

• Maus- und Touch-Scrollen (für mobile Geräte)
• Tastaturtasten, die mit dem Scrollen verbunden sind (z. B. Pfeiltasten, Seite nach oben/ down, home, end)

Implementierung

Der folgende JavaScript-Code erreicht dies:

// 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();
  }
}

Um das Scrollen zu deaktivieren, rufen Sie „disableScroll();“ auf. Um es wieder zu aktivieren, rufen Sie enableScroll() auf.

Das obige ist der detaillierte Inhalt vonWie kann ich das Scrollen von Fenstern während jQuery-Animationen vorübergehend deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!