scroll-behaviorCSS nuosavybė leidžia mums nustatyti, ar slinkties vieta naršyklėje peršoka į naują vietą ar sklandžiai gaivina perėjimą, kai vartotojas paspaudžia nuorodą, tikslų pririštas pozicija per przewijanie dėžutę.
html ( scroll-behavior: smooth; )Gilesnis paaiškinimas
Palauk, palauk, apie kokį slinkties laukelį mes kalbame? Tai elementas, kurio turinys peržengia ribas.
„CodePen“ ieškokite CSS-Tricks (@ css-tricks) „Pen Scrolling Box“.
Atkreipkite dėmesį, kaip aukščiau esančiame demonstraciniame laukelyje yra fiksuoto aukščio 200px? Bet koks turinys, viršijantis šį aukštį, yra už laukelio ribų, ir mes pridėjome overflow-y: scroll, kad tas papildomas turinys būtų pasiekiamas vertikaliai slenkant. Tai turime omenyje slinkties laukelį.
Tarkime, kad langelio viršuje pridedame naršymą su kiekviena nuoroda, nukreipta į tris turinio sekcijas:
„CodePen“ ieškokite „CSS-Tricks“ (@ css-tricks) „Pen Scrolling Box w / Nav“.
Kiekviena nuoroda nukreipia vartotoją tiesiai į skirtingas turinio dalis slinkties laukelyje. Pagal nutylėjimą tas perėjimas yra staigus šuolis.
Toks šuolis gali pakenkti. Štai kur scroll-behaviorateina ir leidžia mums nustatyti sklandų slinkties perėjimą. Tokie dalykai anksčiau reikalavo išgalvoto „Javascript“, bet scroll-behaviorsuteiks mums galimybę tai padaryti natūraliai CSS, kai tik pagerės naršyklės palaikymas.
Sintaksė
.module ( scroll-behavior: ( auto | smooth ); )Vertybės
scroll-behaviorNuosavybė priima dvi vertybes, kurios iš esmės Toggle sklandžiai nemirksi funkciją įjungti ir išjungti.
auto(numatytasis): ši reikšmė leidžia staigiai pereiti tarp slinkties laukelio elementų.smooth: Ši vertė yra sklandus animuotas perėjimas tarp slinkimo laukelio elementų.
Demonstracija
Toliau pateikiama demonstracinė versija šio rašymo metu veiks tik „Chrome 61+“, „Firefox 36+“ ir „Opera 48+“ versijose.
„CodePen“ ieškokite CSS-Tricks (@ css-tricks) „Pen Scrolling Box w /“ scroll-behavior “.
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 61 | 36 | Ne | 79 | Ne |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | Ne |
Daugiau informacijos
- CSSOM peržiūros modulis: specifikacijos projektas, įskaitant CSS ypatybę. Dabartiniame projekte yra rekomendacija perkelti
scroll-behaviorkitą specifikaciją, todėl bus įdomu pamatyti, kur tas nusileidžia. - „Mozilla“ kūrėjų tinklas: specifikacijos MDN nuoroda
- „Microsoft Edge“ platformos būsena: Šiuo metu šios funkcijos būsena rodoma kaip Svarstoma
- „Chrome“ platformos būsena: šiuo metu rodoma šios funkcijos būsena „Kuriama“, o kitų platformų būsenos įtraukiamos kaip nuošalė
- Sklandus slinkties fragmentas: fragmentai, leidžiantys sklandžiai slinkti naudojant „Javascript“ ir „jQuery“
- Sklandus slinkimas ir pritaikymas neįgaliesiems: „CSS-Tricks“ skelbia apie „Javascript“ įgalinto sklandaus slinkimo poveikį