Scroll-padding - CSS-Tricks

Anonim

scroll-paddingface parte din CSS Scroll Snap Module. Ajustarea derulării se referă la „blocarea” poziției ferestrei de vizualizare la anumite elemente de pe pagină, pe măsură ce fereastra (sau un container rulabil) este derulată. Gândiți-vă la un container cu defilare, ca și cum ați pune un magnet deasupra unui element care se lipeste de partea de sus a ferestrei și forțează pagina să nu mai deruleze chiar acolo.

scroll-paddingeste o proprietate opțională pentru orice container de defilare. Containerele de defilare sunt definite ori de câte ori scroll-snap-typeproprietatea este setată la orice altă valoare none. Pentru mai multe informații despre containerele cu defilare, consultați scroll-snap-typeintrarea almanahului.

OK, deci treceți la scroll-padding

scroll-paddingeste folosit pentru a regla regiunea de vizualizare optimă a containerului de prindere. Acest lucru este util dacă containerul are elemente, cum ar fi un antet fix care ar ascunde elementele în interior sau dacă containerul derulant are nevoie de spațiu pentru a oferi elementelor interioare spațiu pentru a respira odată ce au fost „fixate” în poziție.

Un exemplu simplu ar fi utilizarea scroll-paddingpentru a crea o distanță fixă 50pxîn partea de sus și din stânga containerului:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Zonele în roz arată căptușeala de defilare pe containerul de fixare a derulării.

Sintaxă

/* 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);

Notă importantă privind prelungirile: Chrome nu acceptă în prezent formatul scroll-paddingși scroll-marginproprietățile de prelungire . Utilizați stenograma pentru asistență maximă a browserului. Consultați această problemă pe urmăritorul de erori cu crom pentru mai multe detalii și starea actuală.

Valori

scroll-padding acceptă următoarele valori:

  • autolasă umplutura să fie determinată de browser / utilizator-agent. În general, aceasta înseamnă o valoare de 0px, dar poate fi diferită de zero dacă agentul utilizator decide că o altă valoare este mai potrivită.
  • este scris similare paddingși alte proprietăți a căror valoare poate fi definită cu unități ( px, em, vhetc.) sau ca procent al containerului în sine.

Exemplu

Vedeți exemplul Pen-scroll padding
de CSS-Tricks (@ css-tricks) pe CodePen.

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
69 68 11 * 79 11

Mobil / Tabletă

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

Legate de

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

Resurse

  • Recomandarea candidatului CS3 Scroll Snap W3C
  • Practic CSS Scroll Snapping
  • Vă prezentăm CSS Scroll Snap Points