Руководство по закреплению прокрутки

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из самых широко используемых браузеров.

Как пользователь веб-страниц, вы, вероятно, знакомы с проблемой, которую решает закрепление прокрутки. Вы переходите на длинную страницу по медленному соединению и начинаете прокручивать, чтобы прочитать содержимое; пока вы заняты чтением, часть страницы, которую вы смотрите, внезапно пропадает. Это происходит, потому что большие изображения или некоторые другие элементы только что загрузились выше в содержании.

Закрепление прокрутки — это функция браузера, которая направлена на решение этой проблемы с подвисанием содержимого, которая возникает, если содержимое загружается позже, когда пользователь уже прокрутил к новой части документа.

Как это работает?

Закрепление прокрутки корректирует положение прокрутки, чтобы компенсировать изменения за пределами области просмотра. Это означает, что точка в документе, которую пользователь смотрит, остается в области просмотра, что может означать, что положение прокрутки фактически меняется с точки зрения того, насколько далеко пользователь прокрутил документ.

Как включить закрепление прокрутки?

Вы этого не делаете! Функция включена по умолчанию в поддерживающих браузерах. В большинстве случаев закреплённая прокрутка — это именно то, что нужно — подвисание содержимого — плохой опыт для любого пользователя.

Что делать, если мне нужно отладить это?

Если ваша страница работает некорректно при включённом закреплении прокрутки, скорее всего, это происходит потому, что какой-то scroll обработчик событий некорректно обрабатывает дополнительную прокрутку для компенсации перемещения узла якоря.

Вы можете проверить, устраняет ли отключение закрепления прокрутки проблему в Firefox, изменив layout.css.scroll-anchoring.enabled на false в about:config.

Если это так, вы можете проверить, какой узел использует Firefox в качестве якоря, используя layout.css.scroll-anchoring.highlight переключатель. Это отобразит фиолетовое наложение поверх узла якоря.

Если какой-то узел не кажется подходящим в качестве якоря, вы можете исключить его, используя overflow-anchor, как описано ниже.

Что делать, если мне нужно отключить его?

Спецификация предоставляет новое свойство, overflow-anchor, которое можно использовать для отключения закрепления прокрутки на всей или части документа. Это по сути способ отказа от нового поведения.

Возможные значения только auto или none:

auto является начальным значением; пока у пользователя есть поддерживаемый браузер, поведение закрепления прокрутки будет происходить, и они должны увидеть меньше скачков содержимого.
none означает, что вы явно исключили документ или часть документа из закрепления прокрутки.

Чтобы отключить весь документ, вы можете установить его на элементе <body>:

body {
  overflow-anchor: none;
}

Чтобы отключить определённую часть документа, используйте overflow-anchor: none на его контейнерном элементе:

.container {
  overflow-anchor: none;
}

Примечание: В спецификации подробно описано, что после того, как от закрепления прокрутки отказались, его нельзя включить обратно из дочернего элемента. Например, если вы отказались от закрепления прокрутки для всего документа, вы не сможете установить overflow-anchor: auto в другом месте документа, чтобы включить его обратно для раздела.

Триггеры подавления

Спецификация также описывает некоторые триггеры подавления, которые отключат закрепление прокрутки в местах, где это может быть проблематично. Если любой из триггеров происходит на узле якоря или его предке, закрепление подавляется.

Эти триггеры подавления — это изменения вычисленного значения любого из следующих свойств:

top, left, right или bottom
margin или padding
Любые свойства, связанные с width или height
transform и отдельные свойства преобразования translate, scale и rotate

Кроме того, изменения position где-либо внутри области прокрутки также отключают закрепление прокрутки.

Примечание: В ошибке Firefox 1584285 флаг layout.css.scroll-anchoring.suppressions.enabled был добавлен в Firefox Nightly, чтобы разрешить отключение этих триггеров.

Дополнительные материалы

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`Guide_to_scroll_anchoring`	56	79	66	43	превью	56	66	43	Нет	6.0	56
`auto`	56	79	66	43	Нет	56	66	43	Нет	6.0	56
`none`	56	79	66	43	Нет	56	66	43	Нет	6.0	56

Примечания к совместимости

Если вам нужно проверить, доступно ли закрепление прокрутки в браузере, используйте запросы функций, чтобы проверить поддержку свойства overflow-anchor.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring