Wie kann ich das Scrollen in JavaScript für eine bessere Benutzererfahrung vorübergehend deaktivieren?

Deaktivieren Sie das Scrollen vorübergehend in Javascript für ein nahtloses Benutzererlebnis

Das vorübergehende Aussetzen des Scrollens kann das Benutzererlebnis verbessern, wenn Sie mit Animationen arbeiten, z das jQuery scrollTo-Plugin. Während das vollständige Deaktivieren des Scrollens wie eine einfache Lösung erscheinen mag, bietet die Beibehaltung der Sichtbarkeit der Scrollleiste bei gleichzeitiger Verhinderung von Interaktionen einen eleganteren Ansatz.

Um dies zu erreichen, konzentrieren wir uns auf das Abbrechen von Interaktionsereignissen, die damit verbunden sind mit Maus- und Touch-Scrollen, einschließlich Tastaturtasten.

[Funktioniert Demo]

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

Durch den Aufruf von unlockScroll() verhindern wir effektiv das Scrollen, während die scrollTo-Animation läuft. Sobald die Animation abgeschlossen ist, kann enableScroll() verwendet werden, um die Scrollfunktion wiederherzustellen.

Update: Erweiterter Support

Diese Lösung wurde aktualisiert, um nahtlos auf modernen Mobilgeräten zu funktionieren Browser und Chrome-Desktop. Passive Listener sind jetzt integriert, um die Leistung und die Reaktionsfähigkeit des Benutzers aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonWie kann ich das Scrollen in JavaScript für eine bessere Benutzererfahrung vorübergehend deaktivieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!