overflow-anchorLastnost nam omogoča, da se odločijo iz drsenje sidranje, kar je lastnost brskalnika naj bi omogočilo vsebin na obremenitev nad uporabnikove trenutne lokacije DOM, ne da bi spremenili lokacijo uporabnika, potem ko je bila ta vsebina v celoti naložen.
Zakaj ga potrebujemo
Scroll Anchoring je funkcija brskalnika, ki skuša preprečiti pogoste primere, ko se lahko pomaknete navzdol po spletni strani, preden se DOM popolnoma naloži, in kadar koli se elementi, ki se naložijo nad vašo trenutno lokacijo, potisnejo stran navzdol.
Smiselno je, zakaj bi se to zgodilo. Obstajajo lastnosti CSS, ki jih uporabimo za elemente, ki jim dajejo velikost (npr. width), Obliko (npr. transform) In položaj (npr. margin). Če se ti elementi ne naložijo do trenutka, ko smo se pomaknili po strani, jih bo DOM še naprej nalagal, čeprav so zunaj našega trenutnega pogleda in se bo fizično razširil, da bo prostor za te sveže naložene elemente. Ko DOM raste, se naš položaj na strani spreminja, da se prilagodi tem elementom.
Scroll Anchoring preprečuje to "skakanje" izkušnje tako, da zaklene uporabnikov položaj na strani, medtem ko v DOM-u nad trenutno lokacijo potekajo spremembe. To omogoča uporabniku, da ostane zasidran tam, kjer je na strani, tudi ko so novi elementi naloženi v DOM.
overflow-anchorLastnost nam omogoča, da opt-out na funkcijo Pomaknite sidranje v primeru, da je prednostno, da vsebine, da se ponovno tok kot so naloženi elementi.
Sintaksa
article ( overflow-anchor: (auto | none ); )Vrednote
overflow-anchorPremoženje sprejme dve vrednosti, ki je v bistvu preklop ali funkcija omogočena.
auto(privzeto): Omogoča sidranje drsenja na delu strani ali elementu, na katerem je uporabljeno.none: Onemogoči sidranje drsenja delno ali v celoti na spletni strani ali izključi dele DOM-a iz sidranega, kar omogoča ponovni prikaz vsebine.
Verjetno bi to uporabili za body, lahko pa ga prilagodite poljubnemu izbirniku in začel veljati, če se ta element pomakne.
Demo
V tej predstavitvi bo takoj, ko se pomaknete v eno od polj, na vrh tega divja dodalo kup zelenih polj. Običajno bi to vsebino takoj potisnilo navzdol, kar bi lahko močno motilo in izgubilo mesto v besedilu. S overflow-anchor: auto;tem je mesto drsenja ohranjeno. overflow-anchor: none;omogoča, da na novo vstavljeni divji vplivajo na položaj drsenja.
Oglejte si sidro Pen overflow s strani Chrisa Coyierja (@chriscoyier) na CodePen.
Še ena stvar, ki je lahko izjemno uporabna, je položaj drsnika elementa pripnite na dno. Tako je na primer aplikacija za klepet, kjer so nova sporočila dodana DOM-u na dnu in želite, da položaj drsenja ostane na dnu in prikazuje vsa nova sporočila:
Oglejte si
drsenje pisala "Ostani na dnu" s sidrom za pomikanje Chrisa Coyierja (@chriscoyier)
na CodePenu.
Podpora za brskalnik
Od tega pisanja overflow-anchorni trenutni standard W3C, čeprav je osnutek poročila predlagane specifikacije na voljo za branje in ga je Chrome sprejel od različice 56. Mozilla razmišlja o podobni funkciji v Firefoxu. Ko več brskalnikov sprejme funkcijo Scroll Anchoring, lahko pričakujemo večjo podporo za brskalnike, overflow-anchorsaj daje izrecni nadzor nad izključitvijo funkcije.
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 56 | 66 | Ne | 79 | Ne |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ne |
Več informacij
- Scroll Anchoring: Predlagani osnutek specifikacije Scroll Anchoring
- Spletni dnevnik Chromium: objava v spletnem dnevniku, ki napoveduje, da Chrome vključi Scroll Anchoring in lastnost CSS v različico 56
- Vstopnica za Bugzilla # 43114: Odprta vstopnica za vključitev nepremičnine v Firefox