Comment désactiver temporairement le défilement de la fenêtre pendant les animations jQuery ?

Désactivation temporaire du défilement de la fenêtre

Lors de l'utilisation du plugin scrollTo jQuery, il est essentiel d'empêcher le défilement indésirable pendant l'animation pour une expérience utilisateur fluide. Bien qu'une option consiste à activer le débordement de corps, une approche plus raffinée consiste à désactiver la barre de défilement tout en conservant sa visibilité.

Solution : annulation des interactions de défilement

L'événement de défilement lui-même ne peut pas être annulé. Envisagez plutôt d'empêcher les interactions spécifiques qui déclenchent le défilement, notamment :

• Défilement de la souris et du toucher (pour les appareils mobiles)
• Boutons du clavier associés au défilement (par exemple, touches fléchées, page précédente/ down, home, end)

Implémentation

Le code JavaScript suivant permet ceci :

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

Pour désactiver le défilement, appelez DisableScroll(); pour le réactiver, appelez activateScroll().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!