scroll-behaviorVlastnost CSS nám umožňuje určit, zda navigační umístění prohlížeče skočí na novém místě nebo plynule oživuje přechodu, když uživatel klepne na odkaz, který cílů ukotvené pozice uvnitř posouvání pole.
html ( scroll-behavior: smooth; )Hlubší vysvětlení
Počkat, počkat, o čem je to rolovací pole, o kterém mluvíme? Je to prvek s obsahem, který přesahuje své hranice.
Podívejte se na rolovací pero od CSS-Tricks (@ css-tricks) na CodePen.
Všimněte si, jak má pole v ukázce výše pevnou výšku 200px? Jakýkoli obsah, který přesahuje tuto výšku, je mimo hranice pole a přidali jsme, overflow-y: scrollaby byl tento další obsah přístupný pomocí svislého posouvání. To myslíme rolovacím rámečkem.
Řekněme, že do horní části pole přidáme navigaci, přičemž každý odkaz cílí na tři části obsahu:
Podívejte se na rolovací pero s navigací pomocí CSS-Tricks (@ css-tricks) na CodePen.
Každý odkaz uživatele přesměruje přímo do různých částí obsahu uvnitř rolovacího pole. Ve výchozím nastavení je tímto přechodem náhlý skok.
Tento druh skoku může být nepříjemný. To je místo, kde scroll-behaviorpřichází a umožňuje nám nastavit plynulý přechod posouvání. Takové věci se dříve používaly jako fantastický Javascript, ale scroll-behaviorumožní nám to nativně v CSS, jakmile se zlepší podpora prohlížeče.
Syntax
.module ( scroll-behavior: ( auto | smooth ); )Hodnoty
scroll-behaviorVlastnost přijímá dvě hodnoty, které v podstatě přepínání hladkém rolování funkci zapnout a vypnout.
auto(výchozí): Tato hodnota umožňuje náhlý skok mezi prvky v rolovacím poli.smooth: Věrná svému názvu, tato hodnota je plynulý animovaný přechod mezi prvky v rolovacím poli.
Ukázka
Následující ukázka bude v době psaní tohoto článku fungovat pouze na Chrome 61+, Firefox 36+ a Opera 48+.
Podívejte se na rolovací rolovací pero s "posouváním" od CSS-Tricks (@ css-tricks) na CodePen.
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 61 | 36 | Ne | 79 | Ne |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ne |
Více informací
- Modul zobrazení CSSOM: Specifikace konceptu, včetně vlastnosti CSS. Současný koncept obsahuje doporučení k přesunu
scroll-behaviorna jinou specifikaci, takže bude zajímavé sledovat, kde to přistane. - Mozilla Developer Network: Odkaz MDN pro specifikaci
- Stav platformy Microsoft Edge: Aktuálně zobrazuje stav této funkce jako Zvažováno
- Stav platformy Chrome: Aktuálně zobrazuje stav této funkce jako ve vývoji a zahrnuje stavy pro jiné platformy jako stranou
- Smooth Scrolling Snippet: Snippets to enable smooth scrolling with Javascript and jQuery
- Hladké posouvání a přístupnost: Příspěvek triků CSS o dopadu plynulého posouvání povoleného Javascriptem