Scroll-margin - CSS-Tricks

Anonim

scroll-marginface 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-margineste o proprietate opțională pentru un element de derulare în cadrul unui container de derulare. Pentru mai multe informații despre containerele cu defilare, consultați scroll-snap-typeintrarea almanahului.

Introduceți scroll-margin

scroll-margineste folosit pentru a regla zona de fixare a unui element (caseta care definește locul în care va fi fixat elementul). Adăugarea scroll-margineste utilă atunci când trebuie să acordați un spațiu unui element de la marginea containerului atunci când este fixat în poziție, dar permițând situații în care fiecare element ar putea avea nevoie de spațieri ușor diferite. Dacă toate elementele au aceleași cerințe de spațiere, luați în considerare utilizarea scroll-paddingpe containerul părinte în loc de scroll-margindeoarece afectează spațierea pentru toate elementele din container.

Un exemplu simplu în care spațiul scroll-marginpermite 50px în jurul valorii de sus și din stânga unui element arată astfel:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Zona roz reprezintă elementul de scroll-marginpe acest element.

Sintaxă

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

Notă importantă cu privire la prelungirile: Chrome (și, eventual, alte browsere) nu acceptă în prezent formate scroll-paddingși scroll-marginproprietăți de lungă durată . Utilizați stenograma pentru asistență maximă a browserului. Pentru mai multe detalii și starea actuală, consultați această problemă pe urmăritorul de erori cu crom.

Valori

scroll-marginacceptă următoarea lungime de valoare, care este scris similară marginși alte proprietăți a căror valoare poate fi definită cu unități ( px, em, vhetc). Consultați modulul Valori și unități W3C pentru mai multe informații. Procentele nu pot fi utilizate pentru scroll-marginfiecare specificație.

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