Comment désactiver temporairement le défilement en JavaScript sans masquer la barre de défilement ?

Comment désactiver temporairement le défilement

Une façon de désactiver temporairement le défilement lors de l'utilisation du plugin scrollTo jQuery consiste à ajuster le CSS du "body " élément. Cependant, cette approche peut masquer la barre de défilement, ce qui n'est peut-être pas souhaitable.

Une solution plus efficace consiste à empêcher des événements d'interaction spécifiques de déclencher le défilement. Ces événements incluent :

• Défilement de la souris
• Défilement tactile
• Boutons associés au défilement

Pour mettre en œuvre cette solution, vous pouvez utiliser le code JavaScript suivant :

// Disable scrolling
function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
  window.addEventListener('wheel', preventDefault, { passive: false }); // modern desktop
  window.addEventListener('touchmove', preventDefault, { passive: false }); // mobile
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// Enable scrolling
function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener('wheel', preventDefault, { passive: false }); 
  window.removeEventListener('touchmove', preventDefault, { passive: false });
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

Ce code définit les écouteurs d'événements sur l'élément window pour empêcher les actions de défilement par défaut d'être déclenché. Lorsque vous devez désactiver le défilement, appelez la fonction DisableScroll() ; pour réactiver le défilement, appelez la fonction activateScroll().

Cette approche permet à la barre de défilement de rester visible mais l'empêche d'être utilisée pour le défilement. Il fonctionne également sur un large éventail de navigateurs.

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!