overflow-anchorВластивість дозволяє відмовитися від прокрутки якорів, яка є особливість браузера призначена для забезпечення вмісту для завантаження вище поточного місцезнаходження DOM користувача без зміни місця розташування користувача один раз було повністю завантажено , що зміст.
Навіщо нам це потрібно
Прокручування - це функція браузера, яка намагається запобігти типовій ситуації, коли ви можете прокручувати веб-сторінку до повного завантаження DOM, а коли це відбувається, будь-які елементи, які завантажуються над вашим поточним місцезнаходженням, штовхають вас далі вниз по сторінці.
Має сенс, чому так сталося. Існують властивості CSS, які ми застосовуємо до елементів, що надають їм розмір (наприклад width), форму (наприклад transform) та положення (наприклад margin). Якщо ці елементи не завантажились до того часу, коли ми прокрутили сторінку вниз, DOM продовжить завантажувати їх, хоча вони знаходяться поза нашим поточним вікном перегляду, і фізично розшириться, щоб звільнити місце для цих свіжозавантажених елементів. У міру зростання DOM наша позиція на сторінці змінюється з урахуванням цих елементів.
Scroll Anchoring запобігає такому «стрибковому» досвіду, блокуючи позицію користувача на сторінці, поки відбуваються зміни в DOM над поточним місцем розташування. Це дозволяє користувачеві залишатися на якорі там, де він знаходиться на сторінці, навіть коли нові елементи завантажуються в DOM.
overflow-anchorВластивість дозволяє відмовитися від функції прокрутки анкерування в тому випадку, якщо він є кращим , щоб зміст бути повторно потоком , як завантажуються елементи.
Синтаксис
article ( overflow-anchor: (auto | none ); )Цінності
overflow-anchorВластивість приймає два значення , які по суті тумблер чи ні, включена функція.
auto(за замовчуванням): Дозволяє закріпити прокрутку на тій частині сторінки або елементі, на якій вона застосована.none: Вимикає прив'язку прокрутки частково або повністю веб-сторінки, або виключає частини DOM із прив'язуваного, дозволяючи змісту перекомпонувати.
Можливо, ви застосуєте це до body, але ви можете застосувати його до будь-якого селектора, і це набере чинності, якщо цей елемент прокрутиться.
Демо
У цій демонстрації, як тільки ви прокрутите один із вікон, він додасть купу зелених вікон у верхню частину цього розділу. Зазвичай це негайно відштовхує вміст, що потенційно може сильно відволікати увагу і втратити своє місце в тексті. З overflow-anchor: auto;, місце прокрутки збережено. overflow-anchor: none;дозволяє щойно вставленим div-файлам впливати на положення прокрутки.
Подивіться на переповнення ручки Кріса Койєра (@chriscoyier) на CodePen.
Ще одна річ, яка може бути надзвичайно корисною, - це закріплення позиції прокрутки елемента внизу. Наприклад, додаток для чату, де нові повідомлення додаються до DOM внизу, і ви хочете, щоб позиція прокрутки залишалася внизу, показуючи всі нові повідомлення:
Дивіться
прокрутку ручки "Залишись внизу" за допомогою якоря прокрутки Кріса Койєра (@chriscoyier)
на CodePen.
Підтримка браузера
На момент написання цієї статті overflow-anchorне є чинним стандартом W3C, хоча проект звіту пропонованої специфікації доступний для читання і був прийнятий Chrome з версії 56. Mozilla розглядає подібну функцію у Firefox. Оскільки все більше браузерів застосовують функцію фіксації прокрутки, ми можемо розраховувати на збільшення підтримки браузера, overflow-anchorоскільки вона дає явний контроль для відмови від цієї функції.
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 56 | 66 | Ні | 79 | Ні |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ні |
Більше інформації
- Прокручування закріплення: Пропонований проект специфікації закріплення прокрутки
- Блог Chromium: публікація в блозі, що повідомляє про включення Chrome закріплення прокрутки та властивості CSS у версії 56
- Квиток Bugzilla # 43114: Відкритий квиток для включення майна у Firefox