overflow-anchorСвойство позволяет отказаться от прокрутки якорей, которая является особенность браузера предназначена для обеспечения содержимого для загрузки выше текущего местоположения DOM пользователя без изменения местоположения пользователя один раз было полностью загружено , что содержание.
Зачем это нужно
Привязка прокрутки - это функция браузера, которая пытается предотвратить распространенную ситуацию, когда вы можете прокрутить веб-страницу вниз до того, как DOM полностью загрузится, и, когда это произойдет, любые элементы, которые загружаются выше вашего текущего местоположения, подталкивают вас вниз по странице.
Имеет смысл, почему это произошло. Есть свойства CSS, которые мы применяем к элементам, которые задают им размер (например width), форму (например transform) и положение (например margin). Если эти элементы не загрузились к тому моменту, когда мы прокрутили страницу вниз, DOM продолжит загружать их, даже если они находятся за пределами нашего текущего окна просмотра, и будет физически расширяться, чтобы освободить место для этих недавно загруженных элементов. По мере роста модели DOM наше положение на странице изменяется в соответствии с этими элементами.
Привязка прокрутки предотвращает этот «прыжок», блокируя позицию пользователя на странице, пока изменения происходят в DOM над текущим местоположением. Это позволяет пользователю оставаться привязанным к тому месту, где он находится на странице, даже когда новые элементы загружаются в DOM.
Это overflow-anchorсвойство позволяет нам отказаться от функции привязки прокрутки в том случае, если предпочтительнее разрешить перетекание содержимого при загрузке элементов.
Синтаксис
article ( overflow-anchor: (auto | none ); )Значения
overflow-anchorСвойство принимает два значения , которые по существу тумблер или нет, включена функция.
auto(по умолчанию): включает привязку прокрутки к той части страницы или элемента, к которой она применяется.none: Отключает привязку прокрутки частично или на всей веб-странице или исключает части модели DOM из привязки, позволяя переформатировать содержимое.
Вы, вероятно, примените это к body, но вы можете применить его к любому селектору, и он вступит в силу, если этот элемент прокручивается.
Демо
В этой демонстрации, как только вы прокрутите одно из полей, он добавит кучу зеленых полей в верхнюю часть этого div. Обычно это сразу же снижает контент, потенциально сильно отвлекая внимание и теряя свое место в тексте. С overflow-anchor: auto;, место прокрутки сохраняется. overflow-anchor: none;позволяет вновь вставленным div влиять на позицию прокрутки.
См. Якорь переполнения пера Криса Койера (@chriscoyier) на CodePen.
Еще одна вещь, которая может быть очень полезной, - это закрепить позицию прокрутки элемента внизу. Так, например, приложение чата, в котором новые сообщения добавляются к DOM внизу, и вы хотите, чтобы позиция прокрутки оставалась внизу, показывая все новые сообщения:
См.
Прокрутку ручки «Оставаться внизу» с помощью якоря прокрутки Криса Койера (@chriscoyier)
на CodePen.
Поддержка браузера
На момент написания этой статьи overflow-anchorон не является текущим стандартом W3C, хотя черновик отчета по предлагаемой спецификации доступен для чтения и принят в Chrome начиная с версии 56. Mozilla рассматривает аналогичную функцию в Firefox. По мере того, как все больше браузеров используют функцию привязки прокрутки, мы можем ожидать увеличения поддержки браузером, overflow-anchorпоскольку он дает явный контроль для отказа от функции.
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 56 | 66 | Нет | 79 | Нет |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 год | Нет |
Дополнительная информация
- Привязка прокрутки: предлагаемый проект спецификации привязки прокрутки
- Блог Chromium: сообщение в блоге, в котором объявляется о включении Chrome привязки прокрутки и свойства CSS в версию 56.
- Билет Bugzilla № 43114: Откройте заявку, чтобы включить свойство в Firefox.