scroll-behaviorProprietatea în CSS ne permite să definim dacă locația de parcurgere a browser - ului sare la o locație nouă sau animă tranziției atunci când un utilizator face clic pe un link fara probleme care vizeaza o poziție ancorată într - o cutie de defilare.
html ( scroll-behavior: smooth; )Explicație mai profundă
Așteptați, așteptați, ce este această casetă de derulare despre care vorbim? Este un element cu conținut care își revarsă limitele.
Vedeți Caseta de derulare a stiloului de CSS-Tricks (@ css-tricks) pe CodePen.
Observați cum caseta din demonstrația de mai sus are o înălțime fixă de 200px? Orice conținut care depășește înălțimea respectivă se află în afara limitelor casetei și le-am adăugat overflow-y: scrollpentru a face accesibil acel conținut suplimentar cu derulare verticală. La asta ne referim prin casetă de derulare.
Acum, să presupunem că adăugăm o navigare în partea de sus a casetei, cu fiecare link care vizează cele trei secțiuni de conținut:
Vedeți Caseta de derulare a stiloului cu Navigarea prin CSS-Tricks (@ css-tricks) pe CodePen.
Fiecare link duce utilizatorul direct la diferite secțiuni de conținut din interiorul casetei de derulare. În mod implicit, această tranziție între este un salt brusc.
Un astfel de salt poate fi deranjant. De aici scroll-behaviorvine și ne permite să stabilim o tranziție de derulare lină. Un astfel de lucru obișnuia să ia Javascript de lux, dar scroll-behaviorne va oferi posibilitatea de a face acest lucru în mod nativ în CSS, odată ce suportul pentru browser se îmbunătățește.
Sintaxă
.module ( scroll-behavior: ( auto | smooth ); )Valori
scroll-behaviorProprietatea acceptă două valori, care , în esență , de comutare Smooth defilare caracteristica on și off.
auto(implicit): Această valoare permite saltul brusc între elementele din caseta de derulare.smooth: Fidel numelui său, această valoare reprezintă tranziția animată lină între elementele din caseta de derulare.
Demo
Următoarea demonstrație va funcționa numai pe Chrome 61+, Firefox 36+ și Opera 48+ în momentul scrierii acestui articol.
Vedeți Caseta de derulare a stiloului cu comportamentul de defilare 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 |
|---|---|---|---|---|
| 61 | 36 | Nu | 79 | Nu |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | Nu |
Mai multe informatii
- CSSOM View Module: schița de specificații, inclusiv proprietatea CSS. Proiectul actual include o recomandare pentru mutarea
scroll-behaviorla o altă specificație, așa că va fi interesant să vedem unde aterizează. - Rețeaua dezvoltatorilor Mozilla: referința MDN pentru specificație
- Starea platformei Microsoft Edge: afișează în prezent starea acestei caracteristici ca fiind luată în considerare
- Starea platformei Chrome: arată în prezent starea acestei funcții ca în Dezvoltare și include stări pentru alte platforme ca o parte
- Fragment de derulare netedă: fragmente pentru a permite derularea lină cu Javascript și jQuery
- Defilare și accesibilitate netede: o postare CSS-Tricks despre impactul derulării fluide cu Javascript