scroll-behavior — CSS | MDN

scroll-behavior — CSS-свойство, которое определяет поведение прокрутки для любого элемента на странице. Отрабатывается в момент автоматической прокрутки навигационных элементов, либо CSSOM прокручивается API. Любые другие прокручивания, например, те, которые выполняются пользователем, не затрагиваются этим свойством. Если это свойство указано на корневой элемент, оно относится ко всему viewport пространству.

Юзер-агенты могут игнорировать это свойство.

Начальное значениеauto
Применяется кпрокручиваемые блоки
Наследуетсянет
Обработка значениякак указано
Animation typeNot animatable
/* Ключевые значения */
scroll-behavior: auto;
scroll-behavior: smooth;
/* Глобальные свойства */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

Значения

auto

Стандартное поведение прокрутки без эффекта плавности.

smooth

Элемент прокручивается плавно; используется функция тайминга, определяемая юзер-агентом через период времени, отмеченный в нем. Юзер-агенты должны следовать соглашениям платформы, если таковые имеются.

Синтаксис

scroll-behavior = 
auto    | (en-US)
smooth

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>1</scroll-page>
  <scroll-page>2</scroll-page>
  <scroll-page>3</scroll-page>
</scroll-container>

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;
}

Результат

ХарактеристикаСтатусКомментарий
CSS Object Model (CSSOM) View Module
Определение ‘scroll-behavior’ в этой спецификации. 		Рабочий черновикInitial specification

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

scroll-behavior — CSS — Дока

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
  5. Подсказки
  6. На практике
    1. Татьяна Фокина советует

Кратко

Скопировано

Управляет поведением прокрутки внутри блока. Значение smooth делает её плавной.

Пример

Скопировано

html {  scroll-behavior: smooth;}
          html {
  scroll-behavior: smooth;
}

Как понять

Скопировано

При переходе по якорной ссылке браузер мгновенно прыгает к целевому блоку. То же самое происходит, если изменять положение полосы прокрутки при помощи JS. Чтобы изменить стандартное поведение можно использовать значение smooth. Оно сделает прокрутку плавной. Но в остальных ситуациях, например, при прокрутке пользователем колёсика мышки, свойство scroll-behavior не повлияет на поведение браузера.

Как пишется

Скопировано

Возможные значения scroll-behavior:

  • auto — значение по умолчанию, мгновенная прокрутка;
  • smooth — плавная прокрутка.
Открыть демо в новой вкладке

Подсказки

Скопировано

💡 Если вы хотите указать scroll-behavior для всей страницы, указывайте его для селектора html. Для селектора body свойство не сработает.

💡 Значение scroll-behavior не наследуется — его нужно указывать для каждого блока с собственной полосой прокрутки.

💡 Браузер сам управляет скоростью и временем плавной прокрутки, сейчас нет способа на это влиять.

На практике

Скопировано

Татьяна Фокина советует

Скопировано

🛠 Пользователи могут по какой-то причине отключить анимацию в системе. Например, их укачивает от плавной прокрутки на странице с большим количеством контента. Чтобы этого не произошло, можно использовать директиву

@media с проверкой значения prefers-reduced-motion в условии и анимировать прокрутку только тогда, когда пользователь не отключил анимацию.

@media (prefers-reduced-motion: no-preference) {  .smooth-scroll {    scroll-behavior: smooth;  }}
          @media (prefers-reduced-motion: no-preference) {
  .smooth-scroll {
    scroll-behavior: smooth;
  }
}
Оценка материала

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так.

Попробуйте ещё раз?

Предыдущий материал

←

resize

ctrl + alt + ←

Следующий материал

→

scroll-padding

ctrl + alt + →

scroll-behavior — CSS: каскадные таблицы стилей

Свойство CSS scroll-behavior задает поведение поля прокрутки, когда прокрутка активируется API-интерфейсами навигации или прокрутки CSSOM.

Обратите внимание, что на любые другие прокрутки, например, выполняемые пользователем, это свойство не влияет. Когда это свойство указано для корневого элемента, вместо этого оно применяется к области просмотра. Это свойство, указанное в элементе

body , будет , а не распространяются на область просмотра.

Пользовательским агентам разрешено игнорировать это свойство.

 /* Значения ключевых слов */
поведение прокрутки: авто;
поведение прокрутки: гладкое;
/* Глобальные значения */
поведение прокрутки: наследовать;
поведение прокрутки: начальное;
поведение прокрутки: вернуться;
поведение прокрутки: обратный слой;
поведение прокрутки: не установлено;

Свойство scroll-behavior указано как одно из значений ключевого слова, перечисленных ниже.

Значения

авто

Поле прокрутки прокручивается мгновенно.

гладкая

Поле прокрутки плавно прокручивается с использованием функции синхронизации, определяемой агентом пользователя, в течение периода времени, определяемого агентом пользователя. Пользовательские агенты должны следовать соглашениям платформы, если таковые имеются.

Исходное значение авто
Применяется к полям прокрутки
Унаследовано нет
Расчетное значение как указано
Тип анимации Не анимируется 9 0050
 поведение прокрутки = 
 авто | 
 smooth

Настройка поведения плавной прокрутки

HTML 
 
<дел>
  <дел>1
  <дел>2
  <дел>3
CSS 
 а {
  отображение: встроенный блок;
  ширина: 50 пикселей;
  текстовое оформление: нет;
}
навигация,
. scroll-контейнер {
  дисплей: блок;
  поле: 0 авто;
  выравнивание текста: по центру;
}
навигация {
  ширина: 339 пикселей;
  отступ: 5px;
  граница: 1px сплошной черный;
}
.scroll-контейнер {
  ширина: 350 пикселей;
  высота: 200 пикселей;
  переполнение-у: прокрутка;
  поведение прокрутки: гладкое;
}
.scroll-страница {
  дисплей: гибкий;
  выравнивание элементов: по центру;
  выравнивание содержимого: по центру;
  высота: 100%;
  размер шрифта: 5em;
}
Результат
Спецификация
Модуль переполнения CSS, уровень 3
# плавная прокрутка

B Таблицы CD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Просмотрите исходный код на GitHub.
Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Свойство поведения прокрутки CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Добавьте в документ эффект плавной прокрутки:

html {
  scroll-behavior: smooth;
}

Попробуйте сами »

Определение и использование

Свойство scroll-behavior определяет следует ли плавно анимировать положение прокрутки вместо прямого прыжка, когда пользователь нажимает на ссылку в прокручиваемом поле.

Значение по умолчанию: авто
Унаследовано: нет
Анимация: нет. Читать про анимированный
Версия: Модуль просмотра CSSOM (рабочий проект)
Синтаксис JavaScript: объект . style.scrollBehavior="гладкий" Попробуй

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Собственность
поведение прокрутки 61,0 79,0 36,0 14,0 48,0

Синтаксис CSS

поведение прокрутки: auto|smooth|initial|inherit;

Значения свойств

Значение Описание
авто Разрешает прямой переход «эффект прокрутки» между элементами в поле прокрутки. Это по умолчанию
гладкая Позволяет плавно анимировать «эффект прокрутки» между элементами в поле прокрутки.
начальный Устанавливает для этого свойства значение по умолчанию. Читать о инициал
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

❮ Предыдущий Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

900 84 Лучшие примеры Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

No related posts.