Den overflow-anchoregenskapen gjør at vi kan velge bort Bla Forankring, som er en nettleser funksjon ment å tillate innhold til belastningen over brukerens gjeldende DOM plassering uten å endre brukerens plassering gang at innholdet er fullastet.
Hvorfor vi trenger det
Scroll Anchoring er en nettleserfunksjon som prøver å forhindre en vanlig situasjon der du kan bla nedover en webside før DOM er fullastet, og når den gjør det, skyver alle elementer som lastes over din nåværende plassering deg lenger ned på siden.
Det er fornuftig hvorfor dette ville skje. Det er CSS-egenskaper som vi bruker på elementer som gir dem størrelse (f.eks. width), Form (f.eks. transform) Og posisjon (f.eks. margin). Hvis disse elementene ikke har blitt lastet inn da vi har rulle nedover siden, vil DOM fortsette å laste dem selv om de er utenfor vårt nåværende visningsområde og utvides fysisk for å gi plass til de nylastede elementene. Når DOM vokser, endres vår posisjon på siden for å imøtekomme disse elementene.
Rulleforankring forhindrer "hopp" -opplevelsen ved å låse brukerens posisjon på siden mens det skjer endringer i DOM over gjeldende plassering. Dette gjør at brukeren kan holde seg forankret der de er på siden, selv når nye elementer lastes inn i DOM.
Den overflow-anchoregenskapen gjør det mulig for oss å velge bort rulle Forankring funksjon i det tilfelle at det er foretrukket for å tillate innholdet å være re-flow som elementer er lastet.
Syntaks
article ( overflow-anchor: (auto | none ); )Verdier
Den overflow-anchoreiendommen aksepterer to verdier som i hovedsak veksle hvorvidt funksjonen er aktivert.
auto(standard): Gjør det mulig å rulle forankring på den delen av siden eller elementet den brukes på.none: Deaktiver rulleforankring delvis eller hele en webside, eller ekskluderer deler av DOM fra å være forankret, slik at innholdet kan flyte på nytt.
Du vil sannsynligvis bruke dette på body, men du kan bruke det til en hvilken som helst velger, og det vil tre i kraft hvis elementet ruller.
Demo
Så snart du blar i en av boksene i denne demoen, vil den legge til en haug med grønne bokser på toppen av div. Normalt vil det presse innholdet ned umiddelbart, potensielt være en stor distraksjon og miste din plass i teksten. Med overflow-anchor: auto;bevares rulleplassen. overflow-anchor: none;lar de nylig innlagte delene påvirke rulleposisjonen.
Se Pen overflow-anchor av Chris Coyier (@chriscoyier) på CodePen.
En annen ting som kan gjøres som kan være superduper nyttig, er å feste rulleposisjonen til et element til bunnen. Så for eksempel en chat-app der nye meldinger blir lagt til DOM nederst, og du vil at rulleposisjonen skal være nederst og viser alle nye meldinger:
Se pennen
"Stay at the bottom" som ruller med rulleanker av Chris Coyier (@chriscoyier)
på CodePen.
Nettleserstøtte
I skrivende stund overflow-anchorer det ikke en gjeldende W3C-standard, selv om utkastet til rapporten til den foreslåtte spesifikasjonen er tilgjengelig for lesing og har blitt vedtatt av Chrome siden versjon 56. Mozilla vurderer en lignende funksjon i Firefox. Etter hvert som flere nettlesere bruker Scroll Anchoring-funksjonen, kan vi forvente å se mer nettleserstøtte for overflow-anchorsiden det gir eksplisitt kontroll for å velge bort funksjonen.
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 56 | 66 | Nei | 79 | Nei |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nei |
Mer informasjon
- Scroll Anchoring: Foreslått utkast til Scroll Anchoring-spesifikasjonen
- Chromium Blog: Blogginnlegget som kunngjør Chromes inkludering av Scroll Anchoring og CSS-egenskapen i versjon 56
- Bugzilla Ticket # 43114: Åpen billett for å inkludere eiendommen i Firefox