overflow-anchorSvojstvo omogućuje nam isključiti iz Scroll sidrenje, što je značajka preglednik namijenjen da omogući sadržaj tereta iznad korisnikovog trenutnom položaju DOM bez promjene korisnikovu lokaciju nakon što je sadržaj u potpunosti učita.
Zašto nam to treba
Scroll Anchoring je značajka preglednika koja pokušava spriječiti uobičajenu situaciju u kojoj se možete pomicati prema web stranici prije nego što se DOM u potpunosti učita, a kada se to dogodi, svi elementi koji se učitaju iznad vašeg trenutnog mjesta odvedu vas dalje prema dolje.
Ima smisla zašto bi se to dogodilo. Postoje CSS svojstva koja primjenjujemo na elemente koji im daju veličinu (npr. width), Oblik (npr. transform) I položaj (npr margin.). Ako se ti elementi nisu učitali do trenutka kada smo pomaknuli stranicu, DOM će ih nastaviti učitavati iako su izvan našeg trenutnog okvira za prikaz i fizički će se proširiti kako bi napravili mjesta za one svježe učitane elemente. Kako DOM raste, naša se pozicija na stranici mijenja kako bi se prilagodili tim elementima.
Scroll Anchoring sprječava to iskustvo "skakanja" zaključavanjem korisnikove pozicije na stranici dok se događaju promjene u DOM-u iznad trenutnog mjesta. To omogućuje korisniku da ostane usidren tamo gdje se nalazi na stranici, čak i dok se novi elementi učitavaju u DOM.
overflow-anchorSvojstvo omogućuje nam da izuzimanju od Dođite sidrenje značajka u slučaju da se preferira da bi sadržaj biti ponovno protok jer su elementi učitava.
Sintaksa
article ( overflow-anchor: (auto | none ); )Vrijednosti
overflow-anchorNekretnine prihvaća dvije vrijednosti koje u biti uključeno ili ne je značajka omogućena.
auto(zadano): Omogućuje sidrenje pomicanja na dijelu stranice ili elementu na kojem je primijenjeno.none: Onemogućuje sidrenje pomicanja u dijelu ili cijeloj web stranici ili isključuje dijelove DOM-a iz usidrenog, omogućujući ponovni sadržaj.
Vjerojatno biste to primijenili na body, ali možete ga primijeniti na bilo koji selektor i on će stupiti na snagu ako se taj element pomakne.
Demo
U ovoj demonstraciji, čim se pomaknete u jedan od okvira, na vrh tog div-a dodati će hrpu zelenih okvira. Obično bi to sadržaj odmah gurnulo prema dolje, što bi moglo biti velika smetnja i izgubiti mjesto u tekstu. S overflow-anchor: auto;, mjesto pomicanja je sačuvano. overflow-anchor: none;omogućuje novo umetnutim div-ovima da utječu na položaj pomicanja.
Pogledajte sidro olovke za prelivanje Chrisa Coyiera (@chriscoyier) na CodePenu.
Još jedna stvar koja može biti izuzetno korisna je prikvačiti položaj pomicanja elementa na dno. Tako, na primjer, aplikacija za chat gdje se nove poruke dodaju DOM-u na dnu, a želite da položaj pomicanja ostane na dnu i prikazuje sve nove poruke:
Pogledajte
pomicanje olovke "Ostanite na dnu" pomicanjem sidra za pomicanje Chrisa Coyiera (@chriscoyier)
na CodePenu.
Podrška preglednika
Od ovog pisanja overflow-anchorčlanka nije trenutni standard W3C, iako je nacrt izvješća predložene specifikacije dostupan za čitanje i Chrome ga je usvojio od verzije 56. Mozilla razmatra sličnu značajku u Firefoxu. Kako sve više preglednika usvoji značajku Scroll Anchoring, mogli bismo očekivati veću podršku za preglednike overflow-anchorjer daje izričitu kontrolu za isključivanje značajke.
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 56 | 66 | Ne | 79 | Ne |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ne |
Više informacija
- Scroll Anchoring: Predloženi nacrt specifikacije Scroll Anchoring
- Chromium Blog: post na blogu koji najavljuje Chromeovo uključivanje Scroll Anchoring i CSS svojstva u verziji 56
- Ulaznica za Bugzilla # 43114: Otvorena ulaznica za uključivanje nekretnine u Firefox