A overflow-anchortulajdonság lehetővé teszi számunkra a Scroll Anchoring kikapcsolását, amely egy olyan böngészőfunkció, amely lehetővé teszi a tartalom betöltését a felhasználó jelenlegi DOM-helye felett anélkül, hogy megváltoztatná a felhasználó helyét, miután a tartalom teljesen betöltődött.
Miért van szükségünk rá
A görgetési lehorgonyzás egy olyan böngészőfunkció, amely megpróbálja megakadályozni egy olyan általános helyzetet, amikor lefelé görgethet egy weboldalt, mielőtt a DOM teljesen be lett töltve, és ha megtörténik, akkor az aktuális tartózkodási helye fölé betöltött elemek tovább nyomnak az oldalon.
Van értelme, miért történne ez. Vannak CSS tulajdonságok, amelyeket olyan elemekre alkalmazunk, amelyek méretet (pl. width), Alakot (pl. transform) És pozíciót (pl margin.) Adnak nekik . Ha ezek az elemek nem töltődnek be, mire lefelé görgetjük az oldalt, a DOM továbbra is betölteni fogja őket, annak ellenére, hogy a jelenlegi nézetablakunkon kívül vannak, és fizikailag kibővül, hogy helyet biztosítson azoknak a frissen betöltött elemeknek. Ahogy a DOM növekszik, az oldalunkon az ezen elemek befogadásához szükséges helyzetünk megváltozik.
A görgetési lehorgonyzás megakadályozza az „ugrás” élményét azáltal, hogy rögzíti a felhasználó pozícióját az oldalon, miközben a DOM-ban az aktuális hely felett változások zajlanak. Ez lehetővé teszi a felhasználó számára, hogy továbbra is lehorgonyzott maradjon az oldalon, még akkor is, ha új elemeket tölt be a DOM-ba.
A overflow-anchortulajdonság lehetővé teszi számunkra, hogy kikapcsoljuk a Görgetés lehorgonyzás funkciót abban az esetben, ha az elemek betöltésekor előnyösebb megengedni a tartalom újrafolyamatát.
Szintaxis
article ( overflow-anchor: (auto | none ); )Értékek
A overflow-anchortulajdonság két olyan értéket fogad el, amelyek lényegében váltják, hogy a funkció engedélyezve van-e vagy sem.
auto(alapértelmezett): Lehetővé teszi a görgetést a lap vagy elem azon részén, amelyre alkalmazzák.none: Letiltja a görgetés lehorgonyzását egy weboldal egészében vagy egészében, vagy kizárja a DOM egyes részeit a lehorgonyzásból, lehetővé téve a tartalom visszafolyását.
Valószínűleg ezt alkalmazná a következőre:, bodyde kiterjesztheti bármelyik választóra, és akkor lép hatályba, ha az elem görget.
Demó
Ebben a bemutatóban, amint az egyik mezőbe görget, egy csomó zöld mezőt ad a div tetejére. Normális esetben ez azonnal lenyomná a tartalmat, ami hatalmas figyelemelterelés lehet, és elveszítené helyét a szövegben. Ezzel overflow-anchor: auto;a görgetési hely megmarad. overflow-anchor: none;lehetővé teszi, hogy az újonnan beillesztett div-ek befolyásolják a görgetés pozícióját.
Lásd Chris Coyier (@chriscoyier) Pen overflow-horgonyát a CodePen-en.
Egy másik dolog, ami nagyon hasznos lehet, egy elem görgetési helyzetének rögzítése az aljára. Tehát például egy csevegőalkalmazás, amelynek új üzenetei vannak alul a DOM-hoz csatolva, és azt szeretné, hogy a görgetési pozíció az összes új üzenetet megjelenítve alul maradjon:
Lásd a
"Maradj alul" tollat, amelyet Chris Coyier (@chriscoyier) görget a horgony segítségével
a CodePen-en.
Böngésző támogatás
Jelen írás szerint overflow-anchorez nem egy jelenlegi W3C szabvány, bár a javasolt specifikáció jelentéstervezete olvasható és a Chrome elfogadta az 56-os verzió óta. A Mozilla hasonló funkciót fontolgat a Firefoxban. Amint több böngésző elfogadja a görgetés lehorgonyzás funkcióját, várhatóan több böngészőtámogatást fogunk elérni, overflow-anchormivel ez kifejezetten ellenőrzi a szolgáltatás elhagyását.
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 56 | 66 | Nem | 79 | Nem |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | Nem |
Több információ
- Scroll Anchoring: A Scroll Anchoring specifikáció javasolt vázlata
- Chromium Blog: Az a blogbejegyzés, amely bejelentette, hogy a Chrome felvette a Scroll Anchoring és a CSS tulajdonságokat az 56-os verzióba
- Bugzilla 43114. számú jegy: Nyissa meg a jegyet az ingatlan Firefoxba történő felvételére