Heim > Web-Frontend > js-Tutorial > Wie kann ich das Scrollen in JavaScript vorübergehend deaktivieren, ohne die Bildlaufleiste auszublenden?

Wie kann ich das Scrollen in JavaScript vorübergehend deaktivieren, ohne die Bildlaufleiste auszublenden?

Barbara Streisand
Freigeben: 2024-12-21 01:45:10
Original
219 Leute haben es durchsucht

How to Temporarily Disable Scrolling in JavaScript without Hiding the Scrollbar?

So deaktivieren Sie das Scrollen vorübergehend

Eine Möglichkeit, das Scrollen während der Verwendung des jQuery-Plugins scrollTo vorübergehend zu deaktivieren, besteht darin, das CSS des „body“ anzupassen "Element. Allerdings kann dieser Ansatz die Bildlaufleiste verbergen, was möglicherweise nicht wünschenswert ist.

Eine effektivere Lösung besteht darin, zu verhindern, dass bestimmte Interaktionsereignisse das Scrollen auslösen. Zu diesen Ereignissen gehören:

  • Maus-Scrollen
  • Touch-Scrollen
  • Mit dem Scrollen verbundene Schaltflächen

Um diese Lösung zu implementieren, können Sie verwenden den folgenden JavaScript-Code:

// 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);
}
Nach dem Login kopieren

Dieser Code legt Ereignis-Listener für das Fensterelement fest, um zu verhindern, dass Standard-Bildlaufaktionen ausgeführt werden ausgelöst. Wenn Sie das Scrollen deaktivieren müssen, rufen Sie die Funktion „disableScroll()“ auf. Um das Scrollen wieder zu aktivieren, rufen Sie die Funktion „enableScroll()“ auf.

Dieser Ansatz ermöglicht, dass die Bildlaufleiste sichtbar bleibt, verhindert jedoch, dass sie zum Scrollen verwendet wird. Es funktioniert auch in einer Vielzahl von Browsern.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage