overflow-anchorĪpašums ļauj mums atteikties no ritināmu noenkurošanai, kas ir pārlūka funkciju paredzēts, lai ļautu saturu slodzi virs lietotāja pašreizējo DOM pilsētas nemainot lietotāja atrašanās vietu pēc tam, kad šis saturs ir pilnībā ielādēta.
Kāpēc mums tas ir vajadzīgs
Ritināšanas enkurošana ir pārlūkprogrammas funkcija, kas mēģina novērst izplatītu situāciju, kad jūs varat ritināt tīmekļa lapu uz leju, pirms DOM ir pilnībā ielādēts, un, kad tas notiek, visi elementi, kas tiek ielādēti virs jūsu pašreizējās atrašanās vietas, nospiež jūs tālāk lapā.
Ir jēga, kāpēc tas notiktu. Ir CSS īpašības, kuras mēs izmantojam elementiem, kas tiem piešķir izmēru (piem. width), Formu (piem. transform) Un pozīciju (piem. margin). Ja šie elementi nav ielādēti līdz brīdim, kad mēs esam ritinājuši lejup pa lapu, DOM turpinās tos ielādēt, pat ja tie atrodas ārpus mūsu pašreizējā skata punkta, un fiziski paplašināsies, lai atbrīvotu vietu šiem svaigi ielādētajiem elementiem. Pieaugot DOM, mūsu pozīcija lapā mainās, lai pielāgotos šiem elementiem.
Ritināšanas enkurs novērš šo “lēcienu” pieredzi, bloķējot lietotāja pozīciju lapā, kamēr izmaiņas notiek DOM virs pašreizējās atrašanās vietas. Tas ļauj lietotājam palikt noenkurotam vietā, kur viņi atrodas, pat ja DOM tiek ielādēti jauni elementi.
overflow-anchorĪpašumu mums ļauj atteikties no ritināšanas noenkurošanos funkciju, ja tas ir vēlams ļaut saturam jābūt atkārtoti plūsmas, jo elementi ir ielādēts.
Sintakse
article ( overflow-anchor: (auto | none ); )Vērtības
overflow-anchorĪpašums pieņem divas vērtības, kas būtībā pārslēgšanas, vai šī funkcija ir iespējota.
auto(noklusējums): iespējo ritināšanu noenkurot tajā lapas vai elementa daļā, kurai tā tiek lietota.none: Atspējo ritināšanas enkurošanu daļēji vai pilnībā tīmekļa lapā vai izslēdz DOM daļas no enkura, ļaujot saturam pārplūst.
Jūs, iespējams, to lietosit body, taču varat to attiecināt uz jebkuru atlasītāju, un tas stāsies spēkā, ja šis elements ritinās.
Demonstrācija
Šajā demonstrācijā, tiklīdz jūs ritināt vienā no lodziņiem, tas pievienos virkni zaļo lodziņu šīs div augšdaļā. Parasti tas nekavējoties nospiedīs saturu uz leju, potenciāli traucējot un zaudējot vietu tekstā. Ar overflow-anchor: auto;ritināšanas vietu tiek saglabāta. overflow-anchor: none;ļauj nesen ievietotajiem diviem ietekmēt ritināšanas pozīciju.
Skatiet Chris Coyier (@chriscoyier) pildspalvas pārpildes enkuru vietnē CodePen.
Vēl viena lieta, ko var izdarīt un kas var būt ļoti noderīga, ir piespraust elementa ritināšanas pozīciju apakšā. Piemēram, tērzēšanas lietotne, kuras apakšdaļā DOM tiek pievienoti jauni ziņojumi, un jūs vēlaties, lai ritināšanas pozīcija paliktu apakšā, parādot visus jaunos ziņojumus:
Skatiet pildspalvveida pilnšļirci
"Palieciet apakšā", ritinot ar Krisa Koijera (@chriscoyier) ritināšanas enkuru
vietnē CodePen.
Pārlūka atbalsts
Šajā rakstā overflow-anchortas nav pašreizējais W3C standarts, lai gan piedāvātās specifikācijas ziņojuma projekts ir pieejams lasīšanai, un Chrome to ir pieņēmis kopš 56. versijas. Mozilla apsver līdzīgu Firefox funkciju. Tā kā vairāk pārlūkprogrammu izmanto ritināšanas enkura funkciju, mēs varam sagaidīt lielāku pārlūkprogrammas atbalstu, overflow-anchorjo tas dod skaidru kontroli atteikties no funkcijas.
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 56 | 66 | Nē | 79 | Nē |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | Nē |
Vairāk informācijas
- Ritināšanas enkurošana: piedāvātā ritināšanas enkurošanas specifikācijas melnraksts
- Chromium emuārs: emuāra ziņojums, kurā paziņots par Chrome iekļaušanu Scroll Anchoring un CSS īpašumu 56. versijā
- Bugzilla biļete Nr. 43114: atveriet biļeti, lai īpašumu iekļautu Firefox