Den overflow-anchoregenskapen gör att vi kan välja bort Scroll Förankring, vilket är en webbläsare funktion avsedd att tillåta innehåll belastning över användarens aktuella DOM läge utan att ändra användarens plats en gång att innehållet har fullastad.
Varför vi behöver det
Scroll Anchoring är en webbläsarfunktion som försöker förhindra en vanlig situation där du kan rulla ner på en webbsida innan DOM har laddats helt och, när den gör det, skjuter alla element som laddas över din nuvarande plats längre ner på sidan.
Det är vettigt varför detta skulle hända. Det finns CSS-egenskaper som vi tillämpar på element som ger dem storlek (t.ex. width), form (t.ex. transform) och position (t.ex. margin). Om dessa element inte har laddats när vi har rullat ner på sidan fortsätter DOM att ladda dem trots att de befinner sig utanför vårt nuvarande visningsområde och kommer att expandera fysiskt för att ge plats för de nyligen laddade elementen. När DOM växer ändras vår position på sidan för att tillgodose dessa element.
Scroll Anchoring förhindrar "hopp" -upplevelsen genom att låsa användarens position på sidan medan förändringar sker i DOM ovanför den aktuella platsen. Detta gör att användaren kan förbli förankrad där de är på sidan även när nya element laddas till DOM.
Den overflow-anchoregenskapen ger oss möjlighet att opt-out av Scroll Förankring funktionen i händelse av att det är att föredra att låta innehåll att återflödet som element laddas.
Syntax
article ( overflow-anchor: (auto | none ); )Värden
Den overflow-anchorfastighet accepterar två värden som i huvudsak toggle huruvida funktionen är aktiverad.
auto(standard): Aktiverar rullningsförankring på den del av sidan eller elementet som den används på.none: Inaktiverar rullningsförankring delvis eller hela webbsidan, eller utesluter delar av DOM från att förankras, så att innehållet kan återflödas.
Du skulle antagligen tillämpa detta på body, men du kan omfatta det till valfri väljare, och det kommer att träda i kraft om det elementet rullar.
Demo
Så snart du bläddrar i en av rutorna i den här demo, kommer den att lägga till en massa gröna rutor överst i div. Normalt skulle det trycka ner innehållet omedelbart, potentiellt vara en stor distraktion och förlora din plats i texten. Med overflow-anchor: auto;bevaras rullningsplatsen. overflow-anchor: none;låter de nyligen infogade diverna påverka rullningspositionen
Se Chris Coyiers (@chriscoyier) Pen-överflödsankare på CodePen.
En annan sak som kan göras som kan vara superduper användbar är att fästa ett elements rullningsposition i botten. Så till exempel en chattapp där nya meddelanden läggs till i DOM längst ner och du vill att rullningspositionen ska ligga längst ner och visa alla nya meddelanden:
Se pennan
"Stanna längst ner" rulla med rullankare av Chris Coyier (@chriscoyier)
på CodePen.
Webbläsarstöd
I skrivande stund overflow-anchorär det ingen aktuell W3C-standard, även om utkastet till rapporten för den föreslagna specifikationen är tillgänglig för läsning och har antagits av Chrome sedan version 56. Mozilla överväger en liknande funktion i Firefox. När fler webbläsare använder funktionen Scroll Anchoring kan vi förvänta oss att se mer webbläsarstöd för overflow-anchoreftersom det ger uttrycklig kontroll att välja bort funktionen.
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 56 | 66 | Nej | 79 | Nej |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nej |
Mer information
- Scroll Anchoring: Föreslaget utkast till Scroll Anchoring-specifikationen
- Chromium Blog: Blogginlägget som meddelar Chromes införande av Scroll Anchoring och CSS-egenskapen i version 56
- Bugzilla Ticket # 43114: Öppna biljetten för att inkludera fastigheten i Firefox