scroll-behaviorVlastnosť CSS nám umožňuje určiť, či navigačné umiestnenie prehliadača skočí na novom mieste alebo plynule oživuje prechodu, keď používateľ klikne na odkaz, ktorý cieľov ukotvené pozície vo vnútri posúvanie poľa.
html ( scroll-behavior: smooth; )Hlbšie vysvetlenie
Počkať, počkať, o čom je to rolovacie políčko, o ktorom hovoríme? Je to prvok s obsahom, ktorý presahuje svoje hranice.
Prezrite si rolovacie pero od CSS-Tricks (@ css-tricks) na CodePen.
Všimnite si, ako má krabica v ukážke vyššie pevnú výšku 200px? Akýkoľvek obsah, ktorý presahuje túto výšku, je mimo hraníc rámčeka a pridali sme ho, overflow-y: scrollaby sme tento ďalší obsah sprístupnili vertikálnym posúvaním. To myslíme pod rolovacím políčkom.
Povedzme, že do hornej časti poľa pridáme navigáciu, pričom každý odkaz je zameraný na tri časti obsahu:
Prezrite si rolovacie pero s navigáciou pomocou CSS-Tricks (@ css-tricks) na CodePen.
Každý odkaz vedie používateľa priamo do rôznych častí obsahu vo vnútri rolovacieho poľa. Tento prechod medzi nimi je predvolene náhly skok.
Takýto skok môže byť nepríjemný. To je miesto, kde scroll-behaviorprichádza a umožňuje nám nastaviť plynulý prechod posúvania. Takéto veci zvykli mať fantazijný Javascript, ale scroll-behaviorumožnia nám natívne to robiť v CSS, akonáhle sa zlepší podpora prehliadača.
Syntax
.module ( scroll-behavior: ( auto | smooth ); )Hodnoty
scroll-behaviorVlastnosť prijíma dve hodnoty, ktoré v podstate prepínanie hladkom rolovanie funkciu zapnúť a vypnúť.
auto(predvolené): Táto hodnota umožňuje náhly skok medzi prvkami v posúvacom poli.smooth: Verná svojmu názvu, táto hodnota predstavuje plynulý animovaný prechod medzi prvkami v posúvacom poli.
Ukážka
Nasledujúca ukážka bude v čase písania tohto článku fungovať iba v prehliadačoch Chrome 61+, Firefox 36+ a Opera 48+.
Prezrite si rolovacie pole na pero s "rolovaním" od CSS-Tricks (@ css-tricks) na CodePen.
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 61 | 36 | Nie | 79 | Nie |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nie |
Viac informácií
- Modul zobrazenia CSSOM: Návrh špecifikácie vrátane vlastnosti CSS. Aktuálny návrh obsahuje odporúčanie presunúť
scroll-behaviorďalšie špecifikácie, takže bude zaujímavé sledovať, kde to pristane. - Mozilla Developer Network: Referenčné číslo špecifikácie MDN
- Stav platformy Microsoft Edge: Aktuálne zobrazuje stav tejto funkcie ako Zvažuje sa
- Stav platformy Chrome: V súčasnosti sa zobrazuje stav tejto funkcie ako Vo vývoji a okrem iných stavov obsahuje aj ďalšie platformy
- Úryvok plynulého posúvania: Úryvky, ktoré umožňujú plynulé posúvanie pomocou Javascript a jQuery
- Hladké posúvanie a dostupnosť: Príspevok o trikoch CSS o dopade plynulého posúvania s povoleným Javascriptom