Comment puis-je désactiver temporairement le défilement en JavaScript tout en conservant la visibilité de la barre de défilement ?

Désactiver le défilement temporaire en JavaScript

Lors de l'utilisation du plugin scrollTo jQuery, cela peut devenir problématique si l'utilisateur fait défiler pendant que l'animation est en cours. Bien qu'il soit possible de désactiver le défilement en définissant la propriété CSS "overflow" sur "hidden", il est plus souhaitable de garder la barre de défilement visible mais inactive.

Pour y parvenir, il est nécessaire d'empêcher les événements d'interaction associés au défilement. Cela inclut les défilements de la souris et du toucher, ainsi que les boutons qui déclenchent le défilement.

Implémentation du code

Le code JavaScript suivant montre comment désactiver et activer temporairement le défilement :

<br>// Fonction Empêcher l'événement de défilement<br> PreventDefault(e) {<br> e.preventDefault();<br>}</p>
<p>// Empêcher les touches associées au défilement<br>fonction PreventDefaultForScrollKeys(e) {<br> if (keys[e.keyCode ]) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">preventDefault(e);
return false;

Copier après la connexion

}
}

// Dicté pour les codes des touches de défilement
touches const = {37 : 1, 38 : 1, 39 : 1, 40 : 1 };

// Désactiver la fonction de défilement
disableScroll() {
window.addEventListener('DOMMouseScroll', PreventDefault, false); // ancien FF
window.addEventListener('wheel', PreventDefault, { passive: false }); // bureau moderne
window.addEventListener('touchmove', PreventDefault, { passive: false }); // mobile
window.addEventListener('keydown', PreventDefaultForScrollKeys, false);
}

// Activer le défilement
fonction activateScroll() {
window.removeEventListener('DOMMouseScroll ', PreventDefault, false);
window.removeEventListener('wheel', PreventDefault, { passive: false });
window.removeEventListener('touchmove', PreventDefault, { passive: false });
window.removeEventListener('keydown', PreventDefaultForScrollKeys, false);
}

Pour désactiver le défilement, appelez simplement la fonction DisableScroll(). Pour réactiver le défilement, appelez la fonction 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!