В overflow-anchorимота ни дава възможност да се откажете от превъртане на котва, която е функция на браузъра за цел да позволи на съдържание, за да товар над текущото местоположение DOM на потребителя, без да променя местоположението на потребителя веднъж, че съдържанието му е напълно зареден.
Защо ни трябва
Scroll Anchoring е функция на браузъра, която се опитва да предотврати често срещана ситуация, при която можете да превъртите надолу уеб страница, преди DOM да се зареди напълно, а когато това стане, всички елементи, които се зареждат над текущото ви местоположение, ви натискат надолу по страницата.
Има смисъл защо това би се случило. Има CSS свойства, които прилагаме към елементи, които им придават размер (напр. width), Форма (напр. transform) И позиция (напр margin.). Ако тези елементи не са се заредили по времето, когато сме превъртали надолу страницата, DOM ще продължи да ги зарежда, въпреки че са извън текущия ни прозорец и ще се разшири физически, за да освободи място за тези прясно заредени елементи. С нарастването на DOM позицията ни на страницата се променя, за да побере тези елементи.
Scroll Anchoring предотвратява това „прескачане“, като заключва позицията на потребителя на страницата, докато се извършват промени в DOM над текущото местоположение. Това позволява на потребителя да остане закотвен там, където се намира на страницата, дори когато новите елементи се зареждат в DOM.
В overflow-anchorимота ни позволява да се откажете от функцията за превъртане Анкериране в случай, че за предпочитане е да се даде възможност да бъде съдържанието на обратното връщане като елементи са заредени.
Синтаксис
article ( overflow-anchor: (auto | none ); )Стойности
В overflow-anchorимота приема две стойности, които по същество превключване дали или не е активна.
auto(по подразбиране): Разрешава закотвянето при превъртане на частта от страницата или елемента, върху който се прилага.none: Деактивира котвата за превъртане частично или изцяло на уеб страница или изключва части от DOM от закотвеното, което позволява на съдържанието да се преформатира.
Вероятно бихте приложили това към body, но можете да го приложите към всеки селектор и той ще влезе в сила, ако този елемент се превърти.
Демонстрация
В тази демонстрация, веднага щом превъртите в едно от полетата, то ще добави куп зелени кутии в горната част на този div. Обикновено това би изтласкало незабавно съдържанието надолу, което би могло да бъде голямо разсейване и загуба на мястото ви в текста. С overflow-anchor: auto;, мястото за превъртане е запазено. overflow-anchor: none;позволява на нововъведените divs да повлияят на позицията на превъртане.
Вижте котвата за преливане на писалката от Chris Coyier (@chriscoyier) на CodePen.
Друго нещо, което може да бъде направено, което може да бъде супер полезно, е да прикрепите позицията за превъртане на елемент до дъното. Така например, приложение за чат, където нови съобщения се добавят към DOM в долната част и искате позицията за превъртане да остане в долната част, показвайки всички нови съобщения:
Вижте
превъртането на писалката „Останете в долната част“ с котва за превъртане от Chris Coyier (@chriscoyier)
в CodePen.
Поддръжка на браузър
Към момента на написването overflow-anchorне е актуален стандарт W3C, въпреки че проектодокладът на предложената спецификация е достъпен за четене и е приет от Chrome от версия 56. Mozilla обмисля подобна функция във Firefox. Тъй като все повече браузъри приемат функцията Scroll Anchoring, може да очакваме да видим повече поддръжка за браузъра, overflow-anchorтъй като тя дава изричен контрол за отказ от функцията.
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 56 | 66 | Не | 79 | Не |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Не |
Повече информация
- Scroll Anchoring: Предложен проект на спецификацията за Scroll Anchoring
- Chromium Blog: Блогът, който обявява включването на Chrome на Scroll Anchoring и CSS свойството във версия 56
- Билет за Bugzilla # 43114: Отворен билет за включване на собствеността във Firefox