jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis CSS Overscroll Behavior Generator

Genereer overscroll-behavior CSS om pull-to-refresh, scroll-chaining en bounce-effecten te beheren.

Tool laden...

Wat is CSS Overscroll Behavior Generator?

overscroll-behavior bepaalt wat er gebeurt wanneer een scrollbaar gebied zijn grens bereikt. Op mobiele apparaten kan overscrolling pull-to-refresh activeren of scroll van een modal naar de pagina erachter laten overvloeien. Deze eigenschap laat u overscroll-effecten op body-, modal-, sidebar- en carrousel-elementen beperken of voorkomen.

Snel antwoord

Bepaal wat er gebeurt wanneer een scrollbaar element zijn grens bereikt. Gebruik contain om scrollketenen te stoppen terwijl het bounce-effect behouden blijft, of none om alle overscroll-effecten inclusief pull-to-refresh te verwijderen.

Last updated: 2026-06-11

Beperkingen

  • Overscroll-behavior is voornamelijk een mobiele zorg. Desktopbrowsers passen minimale of geen overscroll-effecten toe, dus de eigenschap heeft weinig zichtbare impact op desktop.
  • Het testen van overscroll-behavior op desktop vereist apparaatemulatie in DevTools omdat het scrollgedrag met de muis aanzienlijk verschilt van aanraakgebaren.
  • overscroll-behaviour regelt alleen scrollketenen aan de documentgrens. Het voorkomt geen scrollpropagatie binnen geneste scrollbare containers die zich niet aan de viewportrand bevinden. Gebruik voor interne scrollbeperking ook overscroll-behavior op de binnenste container.

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

Zo gebruik je deze tool

  1. Selecteer een scenario dat overeenkomt met waar u overscroll-gedrag wilt beheersen.
  2. Kies het gedrag: contain om scrollketenen te stoppen maar de bounce te behouden, of none om alle overscroll-effecten te voorkomen.
  3. Selecteer de as als u alleen horizontale of verticale overscroll afzonderlijk wilt beheersen.
  4. Kopieer de CSS en test op een echt mobiel apparaat om het verwachte gedrag te bevestigen.

Waarvoor je het kunt gebruiken

  • Pull-to-refresh voorkomen op een paginabody terwijl verticaal scrollen blijft werken.
  • Achtergrondpagina-scroll stoppen wanneer een modal of lade is geopend.
  • Horizontale scroll in een carrousel beperken zodat deze geen vooruit/terug-navigatie activeert.

Gebruik

Praktische voorbeelden

Voorbeeld

Pull-to-refresh voorkomen

Een webapp-pagina wil pull-to-refresh uitschakelen terwijl normaal scrollen behouden blijft. overscroll-behavior: contain op body stopt het refresh-gebaar zonder de scroll te blokkeren.

Voorbeeld

Modal met scrollvergrendeling

Een modaal dialoogvenster heeft zijn eigen scrollbare inhoud. overscroll-behavior: contain op de modal-overlay voorkomt dat scroll naar de pagina erachter overvloeit.

Veelgemaakte fouten

  • overscroll-behavior: none toepassen op het body-element, wat pull-to-refresh volledig uitschakelt en mobiele gebruikers kan frustreren.
  • overflow: hidden op body instellen voor modal-scrollvergrendeling in plaats van overscroll-behavior te gebruiken.
  • Vergeten te testen op echte mobiele apparaten waar overscroll-effecten verschillen van desktop-emulatie.

Verificatie

  1. Test het gedrag op een echt mobiel apparaat door voorbij de grens van het doelelement te scrollen en het verwachte pull-to-refresh- of scrollketengedrag te bevestigen.
  2. Gebruik Chrome DevTools-apparaatmodus met ingeschakelde aanraakemulatie om mobiel overscroll-gedrag op desktop te benaderen.

FAQ

Vragen over CSS Overscroll Behavior Generator

Wat is het verschil tussen contain en none?

contain stopt scrollketenen naar de ouder maar behoudt het visuele bounce- of gloei-effect aan de grens. none voorkomt zowel het ketenen als het visuele overscroll-effect.

Moet ik overscroll-behavior gebruiken in plaats van overflow: hidden voor modals?

overscroll-behavior is beter voor het voorkomen van scrolloverloop terwijl de modal scrollbaar blijft. Gebruik het samen met een position: fixed-techniek, niet in plaats daarvan.

Heeft overscroll-behavior invloed op pull-to-refresh?

Ja. overscroll-behavior: contain op het body-element voorkomt het pull-to-refresh-gebaar van de browser terwijl normaal paginascrollen nog steeds mogelijk is. Dit is handig voor webapps die zelf refresh of navigatie afhandelen.

Kan ik verschillende waarden toepassen op x en y?

Ja. Gebruik de tweewaarden-syntax overscroll-behavior: contain auto om verschillende gedragingen voor elke as in te stellen. De eerste waarde is voor de x-as en de tweede waarde voor de y-as.

Gerelateerde tools

Meer 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.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool