Свойство scroll-behavior

Свойство scroll-behavior задает плавную или мгновенную прокрутку внутри элемента. Свойство принимает два значения auto (мгновенный переход к элементу) и smooth (плавный переход).

Синтаксис

cssселектор {
  scroll-behavior: auto или smooth;
}

Пример . Значение auto

Давайте зададим мгновенную прокрутку:

html<div>text</div>
cssdiv {
  scroll-behavior: auto;
  width: 4000px;
  height: 2000px;
  background-color: #C2DDFD;
}

Результат:

Пример . Значение smooth

А теперь давайте установим плавную прокрутку:

html<div>text</div>
cssdiv {
  scroll-behavior: smooth;
  width: 4000px;
  height: 2000px;
  background-color: #C2DDFD;
}

Результат:

Смотрите также

  • псевдокласс :fullscreen,
    который задает стиль элементам в полноэкранном режиме
  • псевдокласс :default,
    который задает стиль элементам по умолчанию