Element.scrollIntoView()

Метод Element.scrollIntoView() интерфейса Element прокручивает текущий контейнер родителя элемента, так, чтобы этот элемент, на котором был вызван scrollIntoView() был видим пользователю.

Синтаксис

element.scrollIntoView(); // эквивалентно element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // аргумент типа Boolean
element.scrollIntoView(scrollIntoViewOptions); // аргумент типа Object

Параметры

alignToTop Необязательный
Параметр типа Boolean, возможные значения:
  •  true,  верхняя граница элемента будет выровнена вверху видимой части окна прокручиваемой области. Соответствует scrollIntoViewOptions: {block: "start", inline: "nearest"}. Значение по умолчанию.
  • false, нижняя граница элемента будет выровнена внизу видимой части окна прокручиваемой области. Соответствует конфигурации scrollIntoViewOptions: {block: "end", inline: "nearest"}
scrollIntoViewOptions Необязательный Это экспериментальное API, которое не должно использоваться в рабочем коде.
Аргумент типа boolean или типа object со следующим набором опций:
behavior Необязательный
Определяет анимацию скролла. Принимает значение "auto" или "smooth". По умолчанию "auto".
block Необязательный
Вертикальное выравнивание.
Одно из значений: "start""center""end" или "nearest". По умолчанию "center".
inline Необязательный
Горизонтальное выравнивание.
Одно из значений: "start""center""end" или "nearest". По умолчанию "nearest".

Пример

HTML

<button type="button" class="btn">Нажми на меня</button>

<div class="big"></div>

<div id="box" class="box">Скрытый элемент</div>

CSS

.big {
   background: #ccc;
   height: 300px;
}

.btn {
   font-size: 14px;
}

.box {
   background: lightgreen;
   height: 40px;
}

JavaScript

var hiddenElement = document.getElementById("box");
var btn = document.querySelector('.btn');

function handleButtonClick() {
   hiddenElement.scrollIntoView({block: "center", behavior: "smooth"});
}

btn.addEventListener('click', handleButtonClick);

Результат

Примечание

Область может не полностью прокручивается до элемента (вверх или вниз), это зависит от расположения других элементов.

Спецификации

Спецификация Статус Комментарии
CSS Object Model (CSSOM) View Module
Определение 'Element.scrollIntoView()' в этой спецификации.
Рабочий черновик Initial Definition

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

BCD tables only load in the browser

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