CSS-свойство scroll-behavior
Используйте CSS-свойство scroll-behavior для управления поведением прокрутки. Значения свойства и примеры.
CSS-свойство scroll-behavior определяет, должна ли прокрутка, вызванная навигацией или скриптом («прокручиваемый блок», переходящий к якорю или координатам), быть плавной (анимированной) или мгновенной (одиночным прыжком). По умолчанию установлено значение auto, что означает резкий переход.
На этой странице описывается, что делает данное свойство, где его нужно объявлять, разница между его значениями, распространённые ошибки, а также взаимосвязь с JavaScript-API прокрутки.
Когда это используется?
Наиболее распространённый случай применения — навигация по странице. Когда ссылка указывает на фрагмент, например <a href="#section">, браузер обычно мгновенно переходит к цели. Установив scroll-behavior: smooth на прокручиваемом контейнере, можно превратить этот переход в плавную анимированную прокрутку — без единой строки JavaScript.
html {
scroll-behavior: smooth;
}Где объявлять свойство
Два правила, о которых часто забывают:
- Оно влияет только на программные прокрутки и прокрутки, вызванные навигацией — клик по якорю, вызов
element.scrollIntoView(),window.scrollTo()и т. д. Не влияет на прокрутку, выполняемую пользователем с помощью колёсика мыши, тачпада или полосы прокрутки. - Для прокрутки viewport задавайте свойство на
html, а не наbody. Значение, объявленное на элементе body, не распространяется на viewport и будет проигнорировано. Объявляйте его на элементе html (корневом прокручиваемом блоке). Для любого другого прокручиваемого контейнера объявляйте непосредственно на нём.
Пользовательские агенты вправе игнорировать это свойство; оно также будет пропущено для пользователей, запросивших уменьшение анимации (см. раздел Доступность ниже).
| Начальное значение | auto |
|---|---|
| Применяется к | Прокручиваемым блокам. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSSOM View Module (Working Draft) |
| DOM Syntax | object.style.scrollBehavior = "smooth"; |
Синтаксис
CSS-синтаксис scroll-behavior
scroll-behavior: auto | smooth | initial | inherit;Пример свойства scroll-behavior со значением «auto»:
Пример кода CSS scroll-behavior
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
scroll-behavior: auto;
}
#element1 {
height: 600px;
background-color: #ccc;
}
#element2 {
height: 600px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Scroll-behavior property example</h2>
<div class="main" id="element1">
<h2>Element 1</h2>
<a href="#element2">Click to scroll to Element 2</a>
</div>
<div class="main" id="element2">
<h2>Element 2</h2>
<a href="#element1">Click to scroll to Element 1</a>
</div>
</body>
</html>Пример свойства scroll-behavior со значением «smooth»:
CSS scroll-behavior со значением smooth, пример
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
scroll-behavior: smooth;
}
#element1 {
height: 600px;
background-color: #ccc;
}
#element2 {
height: 600px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Scroll-behavior property example</h2>
<div class="main" id="element1">
<h2>Element 1</h2>
<a href="#element2">Click to scroll to Element 2</a>
</div>
<div class="main" id="element2">
<h2>Element 2</h2>
<a href="#element1">Click to scroll to Element 1</a>
</div>
</body>
</html>При значении smooth клик по любой из ссылок анимирует прокрутку страницы между двумя блоками вместо мгновенного перехода. От предыдущего примера отличается только значение scroll-behavior.
Значения
| Значение | Описание |
|---|---|
| auto | По умолчанию. Прокрутка происходит мгновенно, без анимации. |
| smooth | Прокрутка анимируется плавно между начальным и конечным положениями. |
| initial | Устанавливает свойство в значение по умолчанию (auto). |
| inherit | Наследует значение от родительского элемента. |
Плавная прокрутка конкретного контейнера
scroll-behavior применяется не только к странице. Объявите его на любом элементе, имеющем собственную полосу прокрутки (блок с overflow: auto или overflow: scroll), и программные прокрутки внутри этого контейнера тоже будут анимированы. О том, как создаются прокручиваемые блоки, см. раздел overflow.
.panel {
height: 300px;
overflow-y: auto;
scroll-behavior: smooth;
}// Smoothly scrolls .panel to its bottom because the
// container has scroll-behavior: smooth.
const panel = document.querySelector('.panel');
panel.scrollTop = panel.scrollHeight;Взаимосвязь с JavaScript-API прокрутки
scroll-behavior — это CSS-способ задать стандартную анимацию для прокручиваемого контейнера. API прокрутки также могут запрашивать плавность для каждого отдельного вызова с помощью параметра behavior, который перекрывает значение CSS для данного конкретного вызова:
// One-off smooth scroll, regardless of the CSS scroll-behavior value.
element.scrollIntoView({ behavior: 'smooth' });
window.scrollTo({ top: 0, behavior: 'smooth' });Используйте CSS-свойство, когда хотите, чтобы каждый переход по навигации или якорю в контейнере был плавным; используйте JS-параметр для разовой, ad-hoc прокрутки.
Доступность
Плавная прокрутка может вызывать дискомфорт у пользователей, чувствительных к движению. Учитывайте медиа-запрос prefers-reduced-motion, чтобы отключать анимацию, когда пользователь запросил у системы уменьшение движения:
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}Связанные свойства
- overflow — создание прокручиваемых блоков, которые анимирует
scroll-behavior. - scrollbar — стилизация полосы прокрутки этих блоков.
- offset-anchor — управление точкой привязки при трансформациях.
- HTML links — якоря
href="#id", запускающие плавную прокрутку.