scroll-behavior
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since март 2022 г..
Описание
scroll-behavior - CSS-свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему viewport пространству.
Юзер-агенты могут игнорировать это свойство.
| Начальное значение | auto |
|---|---|
| Применяется к | прокручиваемые блоки |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |
Синтаксис
css
/* Ключевые слова */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Глобальные значения */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;
Значения
Синтаксис
scroll-behavior =
auto |
smooth
Пример
HTML
html
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<scroll-container>
<scroll-page id="page-1">1</scroll-page>
<scroll-page id="page-2">2</scroll-page>
<scroll-page id="page-3">3</scroll-page>
</scroll-container>
CSS
css
a {
display: inline-block;
width: 50px;
text-decoration: none;
}
nav,
scroll-container {
display: block;
margin: 0 auto;
text-align: center;
}
nav {
width: 339px;
padding: 5px;
border: 1px solid black;
}
scroll-container {
display: block;
width: 350px;
height: 200px;
overflow-y: scroll;
scroll-behavior: smooth;
}
scroll-page {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-size: 5em;
}
Результат
Характеристики
| Specification |
|---|
| CSS Overflow Module Level 3 # smooth-scrolling |
Совместимость с браузерами
Loading…