MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

scroll-behavior

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

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

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

Начальное значениеauto
Применяется кпрокручиваемые блоки
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Ключевые значения */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Глобальные свойства */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

Значения

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

Синтаксис

auto | 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 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

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

Совместимость с браузерами

Свойство Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Да)[1] 36 (36) Нет (Да)[1] Нет
Свойство Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка Нет 36 (36) Нет Нет Нет

[1] Поддерживается в Chrome и Opera при включенном параметре "Smooth Scrolling" ("Плавная прокрутка") или включить "Enable experimental web platform features" ("Экспериментальные функции веб-платформы").

Метки документа и участники

 Внесли вклад в эту страницу: lollyroll
 Обновлялась последний раз: lollyroll,