CSS-свойство overflow-anchor
CSS-свойство overflow-anchor определяет, применяется ли якорная прокрутка к элементу. Значения свойства и примеры использования.
CSS-свойство overflow-anchor управляет тем, применяется ли функция якорной прокрутки браузера к элементу. Якорная прокрутка удерживает вашу позицию чтения стабильной, когда содержимое выше viewport изменяет размер, предотвращая «прыжки» страницы. Свойство overflow-anchor позволяет отказаться от этого поведения, если оно мешает.
На этой странице рассматривается, какую проблему решает якорная прокрутка, два значения overflow-anchor, когда следует её отключать, и поддержка браузерами.
Что решает якорная прокрутка
Представьте, что вы читаете статью, и реклама, изображение или лениво загружаемый комментарий внезапно появляется выше вашей текущей позиции прокрутки. Без якорной прокрутки это новое содержимое сдвигает всё вниз, и текст, который вы читали, уходит в сторону. Это один из самых неприятных артефактов веб-страниц.
Якорная прокрутка устраняет эту проблему: браузер выбирает DOM-элемент вблизи верхнего края viewport в качестве якоря, а затем после изменения компоновки корректирует смещение прокрутки так, чтобы якорный элемент оставался визуально неподвижным. Вы продолжаете читать ту же строку; вставленное содержимое беззвучно расширяется выше. Современные браузеры включают это поведение по умолчанию — вы обычно даже не замечаете его, потому что оно просто работает.
overflow-anchor — это способ отказаться от якорной прокрутки. Свойство не включает её (она уже включена); оно лишь позволяет отключить её для поддерева, в котором автоматическая коррекция вызывает проблемы.
Значения свойства
overflow-anchor принимает два фактических значения плюс общие CSS-ключевые слова:
| Значение | Описание |
|---|---|
auto | Значение по умолчанию. Элемент может использоваться в качестве якоря прокрутки, и корректировки якорной прокрутки применяются к нему. |
none | Исключает элемент (и его потомков) из якорной прокрутки. Изменения компоновки внутри него не вызывают компенсирующей корректировки прокрутки. |
initial | Сбрасывает свойство до начального значения (auto). |
inherit | Принимает вычисленное значение от родительского элемента. |
Обратите внимание, что overflow-anchor не наследуется по умолчанию, однако установка none на предке фактически подавляет якорную прокрутку для всего этого поддерева.
| Начальное значение | auto |
|---|---|
| Применяется к | Всем элементам |
| Наследуется | Нет |
| Анимируется | Нет |
| Версия | CSS Scroll Anchoring Module Level 1 |
| DOM-синтаксис | object.style.overflowAnchor = "none"; |
Синтаксис
overflow-anchor: auto | none | initial | inherit;Чтобы отключить якорную прокрутку для всего документа, примените none к корневому элементу:
body {
overflow-anchor: none;
}Чаще всего область применения ограничивают конкретным контейнером, который ведёт себя некорректно:
.live-feed {
overflow-anchor: none;
}Когда отключать якорную прокрутку
В большинстве случаев якорную прокрутку следует оставлять включённой — её отключение возвращает проблему «прыжков» содержимого, которую она призвана предотвращать. Прибегайте к overflow-anchor: none только в особых ситуациях:
- Бесконечная прокрутка с добавлением элементов в начало. Окно чата или лента «загрузить старые сообщения», вставляющая содержимое сверху, иногда конфликтует с якорной прокруткой. Если вы вручную управляете позицией прокрутки через JavaScript, автоматическая корректировка якорной прокрутки может привести к двойной компенсации и появлению заикания.
- Анимации с пользовательским отслеживанием прокрутки. Если вы читаете
scrollTopпри каждом кадре для реализации параллакса или анимации прогресса, корректировка якорной прокрутки может ввести неожиданное смещение. - Журналы в режиме «оставаться внизу». Журнал в стиле терминала, который должен всегда отображать последнюю строку внизу, может быть проще реализовать без вмешательства якорной прокрутки.
В каждом из этих случаев сначала проверьте работу с якорной прокруткой включённой — возможно, отключать её вовсе не понадобится.
Управление через JavaScript
Вы можете переключать якорную прокрутку во время выполнения через DOM:
// Disable scroll anchoring on the feed container
const feed = document.querySelector(".live-feed");
feed.style.overflowAnchor = "none";
// Re-enable it later
feed.style.overflowAnchor = "auto";Поддержка браузерами и деградация
overflow-anchor (и якорная прокрутка в целом) поддерживается в Chrome, Edge, Firefox и других браузерах на основе Chromium. Safari исторически не реализовывал якорную прокрутку, поэтому свойство не оказывает в нём эффекта — страницы ведут себя так, словно якорная прокрутка отключена.
Поскольку свойство лишь убирает удобное поведение, полифилл и резервный вариант не нужны: в неподдерживаемых браузерах overflow-anchor: none безвреден и игнорируется.
Связанные свойства
overflow— сокращённое свойство, определяющее, обрезается ли выходящее за пределы содержимое, прокручивается или остаётся видимым.overflow-xиoverflow-y— управление переполнением по каждой оси независимо.scroll-behavior— плавная анимация прокрутки (например, к якорям) вместо мгновенного перехода.position— используется совместно с липкими/фиксированными компоновками, которые часто соседствуют с прокручиваемыми областями.