CSS Lastnost: scroll-padding

Lastnost scroll-padding določa razdaljo od zabojnika do položaja podrejenih elementov. Pomeni, da, ko prenehamo z drsenjem, se bo drsenje hitro prilagodilo in ustavilo na določeni razdalji od zabojnika do položaja zaskočitve podrejenega elementa v fokusu. Lastnost scroll-padding je skrajšana lastnost za scroll-padding-top, scroll-padding-bottom, scroll-padding-left in scroll-padding-right lastnosti. Vrednost lahko nastavimo na različne načine.

Če ima lastnost štiri vrednosti: scroll-padding: 100px 150px 200px 250px;

1. Zgornja razdalja je 100px.
2. Desna razdalja je 150px.
3. Spodnja razdalja je 200px.
4. Leva razdalja je 250px.

Če ima lastnost tri vrednosti: scroll-padding: 150px 100px 200px;

1. Zgornja razdalja je 150px.
2. Desna in leva razdalja je 100px.
3. Spodnja razdalja je 200px.

Če ima lastnost dve vrednosti: scroll-padding: 100px 200px;

1. Zgornja in spodnja razdalja je 100px.
2. Desna in leva razdalja je 200px.

Če ima lastnost eno vrednost: scroll-padding: 150px;

1. Vse štiri razdalje so enake, 150px.

Če želimo videti učinek lastnosti scroll-padding, mora biti lastnost scroll-snap-align nastavljena na podrejenih (child) elementih, lastnosti scroll-padding in scroll-snap-type pa morata biti nastavljeni na nadrejenem (parent) elementu.

Primerjava različnih vrednosti scroll-padding:

Navodila za uporabo:

1. Črtkano rdeče območje prikazuje scroll-padding prostor
2. Drsi po vsakem okvirju in opazuj, kako se elementi "zaskočijo" na različnih razdaljah
3. Rdeče številke prikazujejo dejanske vrednosti odmikov