Se ti je že kdaj zgodilo, da si se pomikal navzdol po manjšem oknu (div), ko pa si dosegel dno, se je nenadoma začela premikati celotna spletna stran? Ta pojav imenujemo "Scroll Chaining". Na srečo ga lahko elegantno rešimo z eno samo vrstico CSS kode.
1. Kaj naredi overscroll-behavior: contain?
Ko dosežeš konec pomične vsebine v div elementu, dogodki pomikanja (scroll-anja) ostanejo omejeni samo na ta element.
- Omejitev: Pomikanje ne bo prešlo na
bodyelement. - Stabilnost: Glavna stran ostane pri miru, kar izboljša uporabniško izkušnjo na mobilnih napravah.
2. Zakaj uporabljamo overflow-y: auto?
To omogoči navpično pomikanje vsebine znotraj elementa le takrat, ko vsebina dejansko preseže njegovo višino, hkrati pa v kombinaciji z overscroll-behavior preprečimo vpliv na starševske elemente.
Kaj se zgodi brez te nastavitve?
Če tega ne uporabiš in uporabnik doseže konec vsebine v div, se scroll "prelije" na starševski element (npr. body). Posledično se celotna stran začne premikati, kar je še posebej moteče pri modalnih oknih ali stranskih menijih.
Podpora brskalnika
Lastnost overscroll-behavior je podprta v večini modernih brskalnikov (Chrome, Edge, Firefox, Safari), zato je to danes standardna rešitev. Starejši brskalniki, kot je IE11, tega ne podpirajo, a tam stran pač deluje po starem principu.
.scroll-container {
height: 300px;
overflow-y: auto;
overscroll-behavior: contain;
}