scroll-behaviorВластивість в CSS дозволяє визначити підскакує місце прокрутки браузера на нове місце або плавно одушевляє перехід , коли користувач натискає на посилання , що цілі прив'язати положення в прокручуванні вікна.
html ( scroll-behavior: smooth; )Поглиблене пояснення
Чекай, чекай, про що це прокрутка, про яку ми говоримо? Це елемент із вмістом, який перевищує свої межі.
Перегляньте поле прокрутки пера від CSS-Tricks (@ css-tricks) на CodePen.
Зверніть увагу, як вікно в демонстраційній версії вище має фіксовану висоту 200px? Будь-який вміст, який перевищує цю висоту, виходить за межі поля, і ми додали, overflow-y: scrollщоб зробити цей додатковий вміст доступним за допомогою вертикальної прокрутки. Це те, що ми маємо на увазі під полем прокрутки.
Тепер, припустимо, ми додаємо навігацію у верхню частину вікна з кожним посиланням, націленим на три розділи вмісту:
Дивіться вікно прокрутки пера з використанням Nav від CSS-Tricks (@ css-tricks) на CodePen.
Кожне посилання спрямовує користувача безпосередньо до різних розділів вмісту всередині вікна прокрутки. За замовчуванням цей перехід між різким стрибком.
Такий стрибок може викликати неприємності. Ось де це scroll-behaviorвходить і дозволяє нам встановити плавний перехід до прокрутки. Раніше подібні речі використовували вигадливий Javascript, але scroll-behaviorдадуть нам можливість робити це власноруч у CSS, як тільки покращиться підтримка браузера.
Синтаксис
.module ( scroll-behavior: ( auto | smooth ); )Цінності
scroll-behaviorВластивість приймає два значення, які по суті тумблер гладкої функції прокрутки і вимикатися.
auto(за замовчуванням): це значення дозволяє різкий перехід між елементами в полі прокрутки.smooth: Вірно до своєї назви, це значення є плавним анімованим переходом між елементами в полі прокрутки.
Демо
Наступна демонстрація працюватиме лише на Chrome 61+, Firefox 36+ та Opera 48+ на момент написання цієї статті.
Див. Поле прокрутки пера з `поведінкою прокрутки` від CSS-Tricks (@ css-tricks) на CodePen.
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 61 | 36 | Ні | 79 | Ні |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ні |
Більше інформації
- Модуль перегляду CSSOM: проект специфікації, включаючи властивість CSS. Поточний проект включає рекомендацію щодо переходу
scroll-behaviorна іншу специфікацію, тому буде цікаво подивитися, куди це потрапляє. - Мережа розробників Mozilla: Довідка MDN для специфікації
- Статус платформи Microsoft Edge: На даний час відображається статус цієї функції як "Розглядається"
- Статус платформи Chrome: в даний час відображається статус цієї функції як «У стадії розробки» та включає статуси для інших платформ як окремий
- Фрагмент плавної прокрутки: Фрагменти для забезпечення плавної прокрутки за допомогою Javascript та jQuery
- Плавна прокрутка та доступність: повідомлення CSS-Tricks про вплив плавної прокрутки з підтримкою Javascript