overflow-anchorИмовина нам омогућава да онемогуће Сцролл сидрење, што је карактеристика претраживач за циљ да омогући садржај терета изнад тренутне ДОМ локацији корисника, без промене локацију корисника једном да је садржај потпуно напуњен.
Зашто нам то треба
Сцролл Анцхоринг је функција прегледача која покушава да спречи уобичајену ситуацију у којој се можете померити према доле до веб странице пре него што се ДОМ у потпуности учита, а када се то догоди, елементи који се учитају изнад ваше тренутне локације одведу вас даље према доле.
Има смисла зашто би се то догодило. Постоје ЦСС својства која примењујемо на елементе који им дају величину (нпр. width), Облик (нпр. transform) И положај (нпр. margin). Ако се ти елементи нису учитали до тренутка када смо померили страницу, ДОМ ће их наставити учитавати иако су изван нашег тренутног оквира за приказ и физички ће се проширити да би се направило места за свеже учитане елементе. Како ДОМ расте, наша позиција на страници се мења како би се прилагодили тим елементима.
Сцролл Анцхоринг спречава то искуство „скакања“ закључавањем позиције корисника на страници док се у ДОМ-у дешавају промене изнад тренутне локације. Ово омогућава кориснику да остане усидрен тамо где се налази на страници, чак и док се нови елементи учитавају у ДОМ.
overflow-anchorИмовина нам омогућава да онемогући функције Дођите Сидра у случају да је пожељно да се дозволи садржај буде поново проток која су елементи лоадед.
Синтакса
article ( overflow-anchor: (auto | none ); )Вредности
overflow-anchorИмовине прихвата две вредности које у суштини искључи без обзира да ли је омогућена функција.
auto(подразумевано): Омогућава сидрење помицања на делу странице или елементу на који је примењено.none: Онемогућава сидрење помицања делимично или у целости веб странице или искључује делове ДОМ-а из усидреног, омогућавајући поновни садржај.
Вероватно бисте ово применили на body, али можете га применити на било који селектор и он ће ступити на снагу ако се тај елемент помери.
Демо
У овој демонстрацији, чим се померите у један од оквира, додаће гомилу зелених оквира на врх тог див-а. Обично би то одмах изгурало садржај, што би могло бити велика дистракција и губитак места у тексту. Са overflow-anchor: auto;, место помицања је сачувано. overflow-anchor: none;омогућава ново уметнутим див-овима да утичу на положај помицања.
Погледајте сидро за прелив оловке Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
Још једна ствар која може бити изузетно корисна је приквачити положај помицања елемента на дно. Тако, на пример, апликација за ћаскање где се нове поруке додају ДОМ-у на дну, а желите да положај помицања остане на дну и приказује све нове поруке:
Погледајте оловку
„Останите на дну“ помицањем помоћу сидра за помицање Цхриса Цоииера (@цхрисцоииер)
на ЦодеПен-у.
Подршка прегледача
Од писања овог overflow-anchorтекста није тренутни В3Ц стандард, иако је нацрт извештаја предложене спецификације доступан за читање и Цхроме га је усвојио од верзије 56. Мозилла разматра сличну функцију у Фирефоку. Како све већи број прегледача усвоји функцију Сцролл Анцхоринг, могли бисмо очекивати да ћемо видети више подршке за прегледаче, overflow-anchorјер даје изричиту контролу да се функција искључи.
Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.
Десктоп
| Хром | Фирефок | ИЕ | Ивица | Сафари |
|---|---|---|---|---|
| 56 | 66 | Не | 79 | Не |
Мобиле / Таблет
| Андроид Цхроме | Андроид Фирефок | Андроид | иОС Сафари |
|---|---|---|---|
| 88 | 85 | 81 | Не |
Више информација
- Сцролл Анцхоринг: Предложени нацрт спецификације Сцролл Анцхоринг
- Цхромиум Блог: Објава на блогу која најављује Цхроме-ово укључивање Сцролл Анцхоринг и ЦСС својства у верзији 56
- Улазница за Бугзилла # 43114: Отворена улазница за укључивање имовине у Фирефок