Den overflow-anchoregenskab gør os i stand til at fravælge Scroll Forankring, som er en browser-funktion skal gøre det muligt indhold til belastning over brugerens aktuelle DOM placering uden at ændre brugerens placering, når indholdet er fuldt lastet.
Hvorfor vi har brug for det
Scroll Anchoring er en browserfunktion, der forsøger at forhindre en almindelig situation, hvor du kan rulle ned på en webside, før DOM er fuldt indlæst, og når det gør det, skubber eventuelle elementer, der indlæses over din aktuelle placering dig længere ned på siden.
Det giver mening, hvorfor dette ville ske. Der er CSS-egenskaber, som vi anvender på elementer, der giver dem størrelse (f.eks. width), Form (f.eks. transform) Og position (f.eks. margin). Hvis disse elementer ikke er indlæst inden det tidspunkt, hvor vi har rullet ned på siden, fortsætter DOM med at indlæse dem, selvom de er uden for vores nuværende visningsport og udvides fysisk for at give plads til de nyindlæste elementer. Efterhånden som DOM vokser, ændres vores position på siden for at imødekomme disse elementer.
Scroll Anchoring forhindrer denne "spring" -oplevelse ved at låse brugerens position på siden, mens der sker ændringer i DOM over den aktuelle placering. Dette giver brugeren mulighed for at forblive forankret, hvor de er på siden, selv når nye elementer indlæses i DOM.
Den overflow-anchoregenskab tillader os at fravælge Scroll Forankring funktion i tilfælde af, at det foretrækkes at tillade indhold at være re-flow som elementer er indlæst.
Syntaks
article ( overflow-anchor: (auto | none ); )Værdier
Den overflow-anchorejendom accepterer to værdier, der i alt væsentligt skifte hvorvidt funktionen er aktiveret.
auto(standard): Gør det muligt at rulle forankring på den del af siden eller det element, som den anvendes på.none: Deaktiverer rulleforankring delvis eller hele en webside eller udelukker dele af DOM fra at blive forankret, så indholdet kan flyde igen.
Du vil sandsynligvis anvende dette på body, men du kan omfatte det til enhver vælger, og det vil træde i kraft, hvis dette element ruller.
Demo
I denne demo, så snart du ruller i et af felterne, vil det tilføje en flok grønne felter til toppen af denne div. Normalt vil det skubbe indholdet ned med det samme, potentielt være en enorm distraktion og miste din plads i teksten. Med overflow-anchor: auto;bevares rullestedet. overflow-anchor: none;tillader, at de nyligt indsatte divs påvirker rullepositionen.
Se pennens overløbsanker af Chris Coyier (@chriscoyier) på CodePen.
En anden ting, der kan gøres, der kan være super duper nyttigt, er at fastgøre et elementes rulleposition til bunden. Så for eksempel en chat-app, hvor nye meddelelser føjes til DOM i bunden, og du vil have rullepositionen til at forblive i bunden, der viser alle nye beskeder:
Se pennen
"Bliv i bunden", der ruller med rulleanker af Chris Coyier (@chriscoyier)
på CodePen.
Browsersupport
I skrivende stund overflow-anchorer det ikke en nuværende W3C-standard, selvom udkastet til rapporten om den foreslåede specifikation er tilgængelig til læsning og er blevet vedtaget af Chrome siden version 56. Mozilla overvejer en lignende funktion i Firefox. Da flere browsere anvender funktionen Scroll Anchoring, kan vi forvente at se mere browserstøtte til, overflow-anchorda det giver eksplicit kontrol til at fravælge funktionen.
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 56 | 66 | Ingen | 79 | Ingen |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ingen |
Mere information
- Scroll Anchoring: Foreslået udkast til Scroll Anchoring-specifikationen
- Chromium Blog: Blogindlægget, der annoncerer Chromes inkludering af Scroll Anchoring og CSS-ejendommen i version 56
- Bugzilla Ticket # 43114: Åben billet til at medtage ejendommen i Firefox