Ritināšanas polsterējums - CSS-triki

Anonim

scroll-paddingir daļa no CSS Scroll Snap moduļa. Ritināšanas nospiešana attiecas uz skata vietas pozīcijas “bloķēšanu” konkrētiem lapas elementiem, ritinot logu (vai ritināmo konteineru). Padomājiet par ritināšanas un uzspiešanas konteineru, piemēram, magnēta uzlikšanu virs elementa, kas pielīp skata punkta augšpusē un liek lapai pārtraukt ritināšanu turpat.

scroll-paddingir neobligāts rekvizīts jebkuram ritināšanas-snapping konteineram. Kontrolējamie konteineri tiek definēti ikreiz, kad scroll-snap-typerekvizītam ir iestatīta jebkura cita vērtība none. Plašāku informāciju par konteineriem, kas atrodas ritināšanas laikā, skatiet scroll-snap-typealmanaha ierakstā.

Labi, tāpēc pārejiet pie ritināšanas

scroll-paddingtiek izmantots, lai pielāgotu satveramā konteinera optimālo skatīšanās reģionu. Tas ir noderīgi, ja konteinerā ir tādi elementi kā fiksēta galvene, kas aizsegtu elementus iekšpusē, vai arī, ja ritināmajam konteineram ir nepieciešama vieta, lai interjera elementiem būtu iespēja elpot, tiklīdz tie ir “nofiksēti”.

Vienkāršs piemērs ir izmantot, scroll-paddinglai izveidotu fiksētu atstarpi 50pxkonteinera augšdaļā un kreisajā pusē:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Rozā krāsā esošie laukumi parāda ritināšanas uzpildīšanas tvertnes ritināšanu.

Sintakse

/* Shorthand */ scroll-padding: ( | auto )(1,4); /* Longhands */ scroll-padding-top: | auto; scroll-padding-right: | auto; scroll-padding-bottom: | auto; scroll-padding-left: | auto; /* inline-specific and block-specific properties as well */ scroll-padding-block: ( | auto )(1,2); scroll-padding-inline: ( | auto )(1,2);

Svarīga piezīme par garām rokām: pārlūkā Chrome pašlaik netiek atbalstīts formāts scroll-paddingun scroll-marginrekvizīti. Lai maksimāli atbalstītu pārlūku, izmantojiet stenogrammu. Skatiet šo problēmu hroma kļūdu izsekotājā, lai iegūtu sīkāku informāciju un pašreizējo statusu.

Vērtības

scroll-padding pieņem šādas vērtības:

  • autoatstāj polsterējumu noteikt pārlūkprogrammai / lietotāja aģentam. Parasti tas nozīmē vērtību 0px, bet var būt nulle, ja lietotāja aģents nolemj, ka cita vērtība ir piemērotāka.
  • ir rakstīts, kas ir līdzīgas paddingun citus īpašumus, kuru vērtība var tikt noteikta ar vienību ( px, em, vhuc), vai kā procentus no konteinera.

Piemērs

Skatiet
CSS-Tricks (@ css-tricks) pildspalvas ritināšanas un pildīšanas piemēru vietnē CodePen.

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
69 68 11 * 79 11

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 81. 11.0-11.2

Saistīts

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Resursi

  • CSS Scroll Snap W3C kandidātu ieteikums
  • Praktiska CSS ritināšanas sagrābšana
  • Iepazīstinām ar CSS Scroll Snap Points