Ši overflow-anchornuosavybė leidžia mums atsisakyti „Scroll Anchoring“, kuri yra naršyklės funkcija, skirta leisti turinį įkelti virš dabartinės vartotojo DOM vietos, nekeičiant vartotojo vietos, kai tas turinys bus visiškai įkeltas.
Kodėl mums to reikia
„Scroll Inchoring“ yra naršyklės funkcija, kuria bandoma užkirsti kelią įprastai situacijai, kai galite slinkti žemyn tinklalapiu, kol DOM dar nėra visiškai įkeltas, o kai jis įvyksta, bet kokie elementai, įkeliami virš jūsų dabartinės vietos, stumia jus toliau puslapyje.
Tikslinga, kodėl taip atsitiktų. Yra CSS ypatybių, kurias naudojame elementams, kurie suteikia jiems dydį (pvz. width), Formą (pvz. transform) Ir padėtį (pvz. margin). Jei šie elementai nebuvo įkelti iki to laiko, kai slinkome žemyn, DOM juos toliau įkels, net jei jie yra už dabartinės mūsų peržiūros srities ribų, ir fiziškai išsiplės, kad atsirastų vietos tiems ką tik įkeltiems elementams. Didėjant DOM, mūsų pozicija puslapyje keičiasi, kad atitiktų tuos elementus.
„Scroll Inchoring“ užkerta kelią „šokinėjimui“, užrakindama vartotojo padėtį puslapyje, kai DOM vyksta pakeitimai virš dabartinės vietos. Tai leidžia vartotojui likti įtvirtintam ten, kur jie yra puslapyje, net kai nauji elementai įkeliami į DOM.
overflow-anchorNuosavybė leidžia mums atsisakyti iš Pereikite prie inkaro funkciją tuo atveju, pageidautina leisti turinį iš naujo srautas taip elementai yra pakrautas.
Sintaksė
article ( overflow-anchor: (auto | none ); )Vertybės
overflow-anchorNuosavybė priima dvi vertybes, kurios iš esmės Toggle ar funkcija yra aktyvuota.
auto(numatytasis nustatymas): įgalina slinkti įtvirtinimą toje puslapio ar elemento dalyje, kuriai jis taikomas.none: Išjungia slinkimo įtvirtinimą iš dalies ar visame tinklalapyje arba neįtraukia DOM dalių į inkaravimą, kad turinys galėtų grįžti.
Tikriausiai tai taikytumėte body, bet galite apimti bet kurį pasirinkiklį ir jis įsigalios, jei tas elementas slinks.
Demonstracija
Šioje demonstracijoje, kai tik slinksite vienoje iš langelių, ji pridės žalių dėžučių krūvelę to divo viršuje. Paprastai tai nedelsiant nustumtų turinį į apačią, tai gali labai išsiblaškyti ir prarasti savo vietą tekste. Su overflow-anchor: auto;, slinkimo vieta yra išsaugota. overflow-anchor: none;leidžia naujai įterptiems divams paveikti slinkties padėtį.
Peržiūrėkite Chriso Coyier (@chriscoyier) „Pen overflow-inkarą“ svetainėje „CodePen“.
Kitas dalykas, kurį galima padaryti ir kuris gali būti labai naudingas, yra elemento slinkties padėties prisegimas apačioje. Pavyzdžiui, pokalbių programa, kurioje nauji pranešimai pridedami prie DOM apačioje, ir norite, kad slinkties padėtis liktų apačioje ir rodytų visus naujus pranešimus:
Žiūrėkite
Chriso Coyierio (@chriscoyier)
„CodePen “ rašiklį „Būkite apačioje“ .
Naršyklės palaikymas
Šiuo metu overflow-anchortai nėra dabartinis W3C standartas, nors siūlomos specifikacijos ataskaitos projektą galima perskaityti ir „Chrome“ priėmė nuo 56 versijos. „Mozilla“ svarsto panašią „Firefox“ funkciją. Kai daugiau naršyklių priima „Scroll Anchoring“ funkciją, galime tikėtis sulaukti daugiau naršyklės palaikymo, overflow-anchornes tai suteikia aiškų valdymą atsisakyti funkcijos.
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 56 | 66 | Ne | 79 | Ne |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 81 | Ne |
Daugiau informacijos
- „Scroll Anchoring“: siūlomas „Scroll Anchoring“ specifikacijos projektas
- „Chromium“ tinklaraštis: tinklaraščio įrašas, kuriame skelbiama, kad „Chrome“ įtraukia „Scroll Anchoring“ ir CSS nuosavybę į 56 versiją
- „Bugzilla“ bilietas Nr. 43114: atidarykite bilietą, jei norite įtraukti turtą į „Firefox“