Comment puis-je désactiver temporairement le défilement en JavaScript pour une meilleure expérience utilisateur ?

Désactiver temporairement le défilement en Javascript pour une expérience utilisateur fluide

La suspension temporaire du défilement peut améliorer l'expérience utilisateur lorsque vous travaillez avec des animations, telles que le plugin jQuery scrollTo. Même si désactiver complètement le défilement peut sembler une solution simple, conserver la visibilité de la barre de défilement tout en empêchant les interactions offre une approche plus élégante.

Pour y parvenir, nous nous concentrerons sur l'annulation des événements d'interaction associés avec défilement à la fois de la souris et du toucher, y compris les boutons du clavier.

[Travail Démo]

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

En appelant DisableScroll(), nous empêchons efficacement le défilement pendant que l'animation scrollTo est en cours. Une fois l'animation terminée, activateScroll() peut être utilisé pour restaurer la fonctionnalité de défilement.

Mise à jour : prise en charge améliorée

Cette solution a été mise à jour pour fonctionner de manière transparente sur les mobiles modernes. navigateurs et bureau Chrome. Des auditeurs passifs sont désormais intégrés pour maintenir les performances et la réactivité des utilisateurs.

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!