jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose CSS-Overscroll-Behavior-Generator

Generiere overscroll-behavior-CSS, um Pull-to-Refresh, Scroll-Verkettung und Bounce-Effekte zu steuern.

Tool wird geladen...

Was ist CSS-Overscroll-Behavior-Generator?

overscroll-behavior steuert, was passiert, wenn ein scrollbarer Bereich seine Grenze erreicht. Auf mobilen Geräten kann Überscrollen Pull-to-Refresh auslösen oder Scrollen von einem Modal auf die dahinterliegende Seite übergreifen lassen. Diese Eigenschaft ermöglicht es Ihnen, Überscroll-Effekte auf body-, modal-, sidebar- und karussell-Elementen zu begrenzen oder zu verhindern.

Kurze Antwort

Steuern Sie, was passiert, wenn ein scrollbares Element seine Grenze erreicht. Verwenden Sie contain, um Scroll-Weiterleitung zu stoppen, während der Bounce-Effekt erhalten bleibt, oder none, um alle Überscroll-Effekte inklusive Pull-to-Refresh zu entfernen.

Last updated: 2026-06-11

Einschränkungen

  • Overscroll-behavior ist hauptsächlich ein mobiles Thema. Desktop-Browser wenden minimale oder keine Überscroll-Effekte an, daher hat die Eigenschaft auf dem Desktop wenig sichtbare Auswirkung.
  • Das Testen von overscroll-behavior auf dem Desktop erfordert Geräteemulation in den DevTools, da sich Maus-Scrollen erheblich von Touch-Gesten unterscheidet.
  • overscroll-behavior steuert nur die Scroll-Weiterleitung an der Dokumentgrenze. Es verhindert keine Scroll-Weiterleitung innerhalb verschachtelter scrollbarer Container.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie ein Szenario, das dem Ort entspricht, an dem Sie das Überscroll-Verhalten steuern möchten.
  2. Wählen Sie das Verhalten: contain stoppt die Scroll-Weiterleitung, behält aber den Bounce bei, oder none verhindert alle Überscroll-Effekte.
  3. Wählen Sie die Achse, wenn Sie nur horizontales oder vertikales Überscrollen separat steuern möchten.
  4. Kopieren Sie das CSS und testen Sie es auf einem echten mobilen Gerät, um das erwartete Verhalten zu bestätigen.

Wofür du es nutzen kannst

  • Pull-to-Refresh auf einer Seiten-Body verhindern, während vertikales Scrollen weiterhin funktioniert.
  • Hintergrundseiten-Scrollen stoppen, wenn ein Modal oder Drawer geöffnet ist.
  • Horizontales Scrollen in einem Karussell begrenzen, damit es keine Vor-/Zurück-Navigation auslöst.

Anwendungsfalle

Praxisbeispiele

Beispiel

Pull-to-Refresh verhindern

Eine Web-App-Seite möchte Pull-to-Refresh deaktivieren, aber normales Scrollen beibehalten. overscroll-behavior: contain auf dem body stoppt die Refresh-Geste, ohne das Scrollen zu blockieren.

Beispiel

Modal mit Scroll-Sperre

Ein modaler Dialog hat eigene scrollbare Inhalte. overscroll-behavior: contain auf dem Modal-Overlay verhindert, dass Scrollen auf die dahinterliegende Seite übergreift.

Haufige Fehler

  • Anwenden von overscroll-behavior: none auf das body-Element, was Pull-to-Refresh vollständig deaktiviert und mobile Nutzer frustrieren kann.
  • Setzen von overflow: hidden auf body für Modal-Scroll-Sperrung anstelle von overscroll-behavior.
  • Vergessen, auf echten mobilen Geräten zu testen, wo Überscroll-Effekte sich von der Desktop-Emulation unterscheiden.

Überprüfung

  1. Testen Sie das Verhalten auf einem echten mobilen Gerät, indem Sie über die Grenze des Ziel-Elements scrollen und das erwartete Verhalten bestätigen.
  2. Verwenden Sie den Chrome DevTools Gerätemodus mit aktivierter Touch-Emulation, um mobiles Überscroll-Verhalten auf dem Desktop zu approximieren.

FAQ

Fragen zu CSS-Overscroll-Behavior-Generator

Was ist der Unterschied zwischen contain und none?

contain stoppt die Scroll-Weiterleitung zum Elternelement, behält aber den visuellen Bounce- oder Glow-Effekt an der Grenze bei. none verhindert sowohl die Weiterleitung als auch den visuellen Überscroll-Effekt.

Sollte ich overscroll-behavior anstelle von overflow: hidden für Modals verwenden?

overscroll-behavior ist besser geeignet, um Scroll-Übergreifen zu verhindern, während das Modal scrollbar bleibt. Verwenden Sie es zusammen mit einer position-fixed-Technik, nicht an deren Stelle.

Beeinflusst overscroll-behavior Pull-to-Refresh?

Ja. overscroll-behavior: contain auf dem body-Element verhindert die Browser-Pull-to-Refresh-Geste, während normales Seiten-Scrollen weiterhin möglich ist.

Kann ich unterschiedliche Werte für x und y anwenden?

Ja. Verwenden Sie die Zwei-Wert-Syntax overscroll-behavior: contain auto, um unterschiedliche Verhaltensweisen für jede Achse festzulegen.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren