Tämän overflow-anchorominaisuuden avulla voimme kieltäytyä vieritysankkuroinnista, joka on selainominaisuus, jonka avulla sisältö voidaan ladata käyttäjän nykyisen DOM-sijainnin yläpuolelle muuttamatta käyttäjän sijaintia, kun sisältö on ladattu kokonaan.
Miksi me tarvitsemme sitä
Vieritysankkurointi on selainominaisuus, joka yrittää estää yleisen tilanteen, jossa voit vierittää verkkosivua alaspäin ennen kuin DOM on ladattu täyteen, ja kun se tapahtuu, kaikki nykyisen sijaintisi yläpuolelle ladatut elementit työntävät sinut alaspäin sivulle.
On järkevää, miksi näin tapahtuisi. On CSS-ominaisuuksia, joita käytämme elementteihin, jotka antavat heille koon (esim. width), Muodon (esim. transform) Ja sijainnin (esim. margin). Jos nämä elementit eivät ole latautuneet siihen mennessä, kun olemme vierittäneet sivua alaspäin, DOM jatkaa niiden lataamista, vaikka ne ovat nykyisen näkymän ulkopuolella, ja laajenee fyysisesti, jotta tilaa tuoreille ladatuille elementeille. Kun DOM kasvaa, asemamme sivulla muuttuu vastaamaan näitä elementtejä.
Vieritysankkurointi estää kyseisen "hyppäämiskokemuksen" lukitsemalla käyttäjän sijainnin sivulla, kun DOM: ssä tapahtuu muutoksia nykyisen sijainnin yläpuolella. Tämän avulla käyttäjä voi pysyä ankkuroituna missä he ovat sivulla, vaikka uusia elementtejä ladataan DOM: iin.
overflow-anchorOmaisuus antaa meille mahdollisuuden opt-out Scroll ankkuroiminen ominaisuus siinä tapauksessa, että se on edullista antaa sisältöä uudelleen virtauksen elementteinä ladataan.
Syntaksi
article ( overflow-anchor: (auto | none ); )Arvot
overflow-anchorOmaisuuden hyväksyy kaksi arvoa, jotka olennaisesti toggle onko ominaisuus on käytössä.
auto(oletus): Mahdollistaa vierityksen ankkuroinnin sivun tai elementin siihen osaan, johon sitä käytetään.none: Poistaa vierityksen ankkuroinnin kokonaan tai kokonaan verkkosivulta tai sulkee DOM: n osat ankkuroitavaksi, jolloin sisältö voi heijastua.
Luultavasti sovellat tätä body, mutta voit laajentaa sen mihin tahansa valitsimeen, ja se tulee voimaan, jos kyseinen elementti vierittää.
Demo
Tässä esittelyssä, heti kun selaat yhtä laatikkoa, se lisää joukon vihreitä laatikoita kyseisen divin yläosaan. Normaalisti se työntäisi sisällön heti alas, mikä voi olla valtava häiriötekijä ja menettää paikkasi tekstissä. Kanssa overflow-anchor: auto;vierityspaikka säilyy. overflow-anchor: none;sallii äskettäin asetettujen div-levyjen vaikuttaa vierityskohtaan.
Katso Chris Coyierin (@chriscoyier) kynän ylivuotoankkuri CodePenistä.
Toinen asia, joka voidaan tehdä erittäin hyödylliseksi, on kiinnittää elementin vierityskohta pohjaan. Joten esimerkiksi chat-sovellus, jossa uudet viestit liitetään DOM: iin alareunassa ja haluat vierityskohdan pysyvän alhaalla ja näyttävän kaikki uudet viestit:
Katso kynä
"Pysy alhaalla" vierittämällä vieritysankkurilla Chris Coyier (@chriscoyier)
CodePenissä.
Selaimen tuki
Tästä kirjoituksesta lähtien overflow-anchorse ei ole nykyinen W3C-standardi, vaikka ehdotetun eritelmän raporttiluonnos on luettavissa ja Chrome on hyväksynyt sen version 56 jälkeen. Mozilla harkitsee vastaavaa ominaisuutta Firefoxissa. Kun useampi selain ottaa käyttöön Selausankkurointi-ominaisuuden, voimme odottaa näkevämme lisää selaintukea, overflow-anchorkoska se antaa nimenomaisen hallinnan ominaisuuden käytöstä poistamiseen.
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 56 | 66 | Ei | 79 | Ei |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ei |
Lisää tietoa
- Vieritysankkurointi: Ehdotettu vieritysankkurointimäärityksen luonnos
- Chromium-blogi: Blogiteksti, jossa ilmoitetaan Chromen sisällyttävän vieritysankkurointi ja CSS-ominaisuus versioon 56
- Bugzilla-lippu nro 43114: Avaa lippu sisällyttääksesi kiinteistön Firefoxiin