See overflow-anchorvara võimaldab meil loobuda kerimisankrutusest, mis on brauseri funktsioon, mis võimaldab sisu laadida kasutaja praegusest DOM-i asukohast kõrgemale, muutmata kasutaja asukohta, kui see sisu on täielikult laaditud.
Miks me seda vajame
Ankurdamise kerimine on brauseri funktsioon, mis püüab vältida tavalist olukorda, kus võite kerida veebilehte alla enne, kui DOM on täielikult laaditud, ja kui see on nii, siis kõik teie praeguse asukoha kohal laaditavad elemendid suruvad teid lehel veelgi alla.
On loogiline, miks see juhtuks. On CSS-i omadusi, mida rakendame elementidele, mis annavad neile suuruse (nt width), kuju (nt transform) ja asukoha (nt margin). Kui need elemendid pole lehe alla kerimise ajaks laaditud, jätkab DOM nende laadimist, isegi kui need asuvad väljaspool meie praegust vaateava, ja laieneb füüsiliselt, et teha ruumi neile värskelt laaditud elementidele. DOM-i kasvades muutub meie positsioon lehel nende elementide mahutamiseks.
Kerimise ankurdamine hoiab ära selle hüppamise kogemuse, lukustades kasutaja positsiooni lehel, kui DOM-is toimuvad muudatused praeguse asukoha kohal. See võimaldab kasutajal jääda ankrusse seal, kus nad lehel on, isegi kui uusi elemente laaditakse DOM-i.
overflow-anchorVara võimaldab meil opt-out Leidke ankurdamine funktsioon Kui see on eelistatud, et võimaldada sisu uuesti voolu elementide laaditakse.
Süntaks
article ( overflow-anchor: (auto | none ); )Väärtused
overflow-anchorVara võtab kaks väärtusi, mis sisuliselt lülita kas funktsioon on lubatud.
auto(vaikimisi): lubab lehe või elemendi osas, millele seda rakendatakse, ankurdamist kerida.none: Keelab osalise või kogu veebilehe ankurdamise kerimise või välistab ankurdatud DOM-i osad, võimaldades sisul tagasivoolu.
Tõenäoliselt rakendaksite seda rakendusele body, kuid saate selle laiendada mis tahes valijale ja see jõustub, kui see element kerib.
Demo
Selles demos lisab see niipea, kui olete kerinud ühte kasti, selle div-i ülaossa hulga rohelisi kaste. Tavaliselt suruks see sisu kohe alla, see võib olla tohutu tähelepanu hajutaja ja kaotada tekstis oma koha. Koos overflow-anchor: auto;on kerimiskoht säilinud. overflow-anchor: none;võimaldab äsja sisestatud dividel mõjutada kerimisasendit.
Vaadake CodePenil Chris Coyieri (@chriscoyier) pliiatsi ülevooluankrit.
Teine asi, mida saab teha ja millest võib super kasu olla, on elemendi kerimisasendi kinnitamine põhja. Näiteks näiteks vestlusrakendus, mille allservas DOM-ile lisatakse uued sõnumid ja soovite, et kerimisasend jääks kõigi uute sõnumite allserva:
Vaadake
Code Cenil Chris Coyieri (@chriscoyier)
kerimisankriga kerivat pliiatsit "Püsi põhjas" .
Brauseri tugi
Selle kirjutise seisuga overflow-anchorei ole praegune W3C standard, kuigi pakutud spetsifikatsiooni aruande mustand on loetav ja Chrome on selle vastu võtnud alates versioonist 56. Mozilla kaalub Firefoxis sarnast funktsiooni. Kui rohkem brausereid võtab kasutusele kerimisankrutamise funktsiooni, võime eeldada, et näeme rohkem brauserituge, overflow-anchorkuna see annab selgesõnalise kontrolli funktsioonist loobumiseks.
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 56 | 66 | Ei | 79 | Ei |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ei |
Rohkem informatsiooni
- Kerimise ankurdamine: kerimise ankurdamise spetsifikatsiooni kavand
- Chromiumi ajaveeb: ajaveebipostitus, milles teatati Chrome'i kaasamisest kerimisankrute ja CSS-i atribuudi versiooni 56
- Bugzilla pilet nr 43114: avatud pilet vara Firefoxi lisamiseks