De overflow-anchoreigenschap stelt ons in staat om ons af te melden voor Scroll Anchoring, een browserfunctie die bedoeld is om inhoud boven de huidige DOM-locatie van de gebruiker te laten laden zonder de locatie van de gebruiker te wijzigen zodra die inhoud volledig is geladen.
Waarom we het nodig hebben
Scroll Anchoring is een browserfunctie die een veelvoorkomende situatie probeert te voorkomen waarin u naar beneden kunt scrollen op een webpagina voordat de DOM volledig is geladen en, wanneer dit het geval is, worden elementen die boven uw huidige locatie worden geladen, u verder naar beneden op de pagina geduwd.
Het is logisch waarom dit zou gebeuren. Er zijn CSS-eigenschappen die we toepassen op elementen die ze grootte (bijv. width), Vorm (bijv. transform) En positie (bijv. margin) Geven . Als die elementen niet zijn geladen tegen de tijd dat we naar beneden scrollen, zal de DOM ze blijven laden, ook al bevinden ze zich buiten onze huidige viewport, en zal hij fysiek uitbreiden om ruimte te maken voor die pas geladen elementen. Naarmate de DOM groeit, verandert onze positie op de pagina om aan die elementen tegemoet te komen.
Scroll Anchoring voorkomt die "spring" -ervaring door de positie van de gebruiker op de pagina te vergrendelen terwijl er wijzigingen plaatsvinden in de DOM boven de huidige locatie. Hierdoor kan de gebruiker verankerd blijven waar ze zijn op de pagina, zelfs als er nieuwe elementen in de DOM worden geladen.
Met de overflow-anchoreigenschap kunnen we ons afmelden voor de functie Scroll Anchoring in het geval dat het de voorkeur heeft om inhoud opnieuw te laten stromen wanneer elementen worden geladen.
Syntaxis
article ( overflow-anchor: (auto | none ); )Waarden
De overflow-anchoreigenschap accepteert twee waarden die in wezen wisselen of de functie al dan niet is ingeschakeld.
auto(standaard): Schakelt scrolverankering in op het gedeelte van de pagina of het element waarop het wordt toegepast.none: Schakelt scrolverankering in een deel of de hele webpagina uit, of sluit delen van de DOM uit van de verankering, waardoor de inhoud opnieuw kan worden geplaatst.
U zou dit waarschijnlijk toepassen op de body, maar u kunt het op elke selector plaatsen en het wordt van kracht als dat element scrolt.
Demo
In deze demo, zodra je in een van de vakken scrolt, zal het een aantal groene vakken aan de bovenkant van die div toevoegen. Normaal gesproken zou dat de inhoud onmiddellijk naar beneden duwen, mogelijk een enorme afleiding en uw plaats in de tekst verliezen. Met overflow-anchor: auto;blijft de schuifplaats behouden. overflow-anchor: none;stelt de nieuw ingevoegde divs in staat de scroll-positie te beïnvloeden.
Zie het overloopanker van de pen door Chris Coyier (@chriscoyier) op CodePen.
Een ander ding dat kan worden gedaan en dat super handig kan zijn, is de schuifpositie van een element op de bodem vastzetten. Dus bijvoorbeeld een chat-app waar nieuwe berichten onderaan aan de DOM worden toegevoegd, en je wilt dat de scroll-positie onderaan blijft en alle nieuwe berichten laat zien:
Zie de Pen
"Blijf onderaan" scrollen met scroll-anker door Chris Coyier (@chriscoyier)
op CodePen.
Browser-ondersteuning
Op het moment van schrijven overflow-anchoris dit geen huidige W3C-standaard, hoewel het conceptrapport van de voorgestelde specificatie beschikbaar is om te lezen en door Chrome is overgenomen sinds Versie 56. Mozilla overweegt een vergelijkbare functie in Firefox. Naarmate meer browsers de functie Scroll Anchoring gebruiken, kunnen we verwachten dat er meer browserondersteuning zal zijn, overflow-anchoraangezien het expliciete controle geeft om u af te melden voor de functie.
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 56 | 66 | Nee | 79 | Nee |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nee |
Meer informatie
- Scroll Anchoring: Voorgestelde versie van de Scroll Anchoring-specificatie
- Chromium-blog: de blogpost waarin wordt aangekondigd dat Chrome Scroll Anchoring en de CSS-eigenschap in versie 56 heeft opgenomen
- Bugzilla Ticket # 43114: Open een ticket om de woning in Firefox op te nemen