Wie kann ich das Scrollen in JavaScript vorübergehend deaktivieren und gleichzeitig die Sichtbarkeit der Bildlaufleiste beibehalten?

Temporäres Scrollen in JavaScript deaktivieren

Bei Verwendung des jQuery-Plugins scrollTo kann es problematisch werden, wenn der Benutzer während der Animation scrollt im Gange. Während es möglich ist, das Scrollen zu deaktivieren, indem man die CSS-Eigenschaft „overflow“ auf „hidden“ setzt, ist es wünschenswerter, die Scrollbar sichtbar, aber inaktiv zu lassen.

Um dies zu erreichen, ist es notwendig, mit dem Scrollen verbundene Interaktionsereignisse zu verhindern. Dazu gehören Maus- und Touch-Scrolls sowie Schaltflächen, die das Scrollen auslösen.

Code-Implementierung

Der folgende JavaScript-Code zeigt, wie das Scrollen vorübergehend deaktiviert und aktiviert wird:

<br>// Scroll-Ereignis verhindern<br>function präventDefault(e) {<br> e.preventDefault();<br>}</p>
<p>// Mit dem Scrollen verknüpfte Tasten verhindern<br>function präventDefaultForScrollKeys(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;

Nach dem Login kopieren

}
}

// Dict für Scroll-Taste codes
const keys = {37: 1, 38: 1, 39: 1, 40: 1};

// Scrollen deaktivieren
function unlockScroll() {
window.addEventListener( 'DOMMouseScroll', verhindernDefault, false); // älteres FF
window.addEventListener('wheel', präventDefault, { passive: false }); // moderner Desktop
window.addEventListener('touchmove', präventDefault, { passive: false }); // mobile
window.addEventListener('keydown', präventDefaultForScrollKeys, false);
}

// Scrollen aktivieren
function enableScroll() {
window.removeEventListener('DOMMouseScroll ', präventDefault, false);
window.removeEventListener('wheel', präventDefault, { passive: false });
window.removeEventListener('touchmove', präventDefault, { passive: false });
window.removeEventListener('keydown', präventDefaultForScrollKeys, false);
}

Um das Scrollen zu deaktivieren, rufen Sie einfach die Funktion „disableScroll()“ auf. Um das Scrollen wieder zu aktivieren, rufen Sie die Funktion enableScroll() auf.

Das obige ist der detaillierte Inhalt vonWie kann ich das Scrollen in JavaScript vorübergehend deaktivieren und gleichzeitig die Sichtbarkeit der Bildlaufleiste beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!