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

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
scroll-behaviorChrome Полная поддержка 61Edge Полная поддержка 79Firefox Полная поддержка 36IE Нет поддержки НетOpera Полная поддержка 48Safari Полная поддержка 14WebView Android Полная поддержка 61Chrome Android Полная поддержка 61Firefox Android Полная поддержка 36Opera Android Полная поддержка 45Safari iOS Полная поддержка 14Samsung Internet Android Полная поддержка 8.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки