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 Необязательный
Aргумент типа 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

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
scrollIntoView
Экспериментальная
Chrome Полная поддержка 29Edge Полная поддержка 18
Замечания
Полная поддержка 18
Замечания
Замечания No support for smooth behavior.
Полная поддержка 12
Замечания
Замечания This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Замечания No support for smooth behavior.
Firefox Полная поддержка 1IE Полная поддержка 8
Замечания
Полная поддержка 8
Замечания
Замечания This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Замечания No support for smooth behavior or center options.
Opera Полная поддержка 38Safari Полная поддержка 6
Замечания
Полная поддержка 6
Замечания
Замечания No support for smooth behavior or center options.
WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 5
Замечания
Полная поддержка 5
Замечания
Замечания No support for smooth behavior or center options.
Samsung Internet Android Полная поддержка Да
scrollIntoViewOptions
Экспериментальная
Chrome Полная поддержка 61
Замечания
Полная поддержка 61
Замечания
Замечания The block and inline options support the values start, center, end, nearest.
Edge ? Firefox Полная поддержка 36
Замечания
Полная поддержка 36
Замечания
Замечания No support for inline option.
Замечания Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
IE Нет поддержки НетOpera Полная поддержка 48
Замечания
Полная поддержка 48
Замечания
Замечания The block and inline options support the values start, center, end, nearest.
Safari Нет поддержки НетWebView Android Полная поддержка 61
Замечания
Полная поддержка 61
Замечания
Замечания The block and inline options support the values start, center, end, nearest.
Chrome Android Полная поддержка 61
Замечания
Полная поддержка 61
Замечания
Замечания The block and inline options support the values start, center, end, nearest.
Firefox Android Полная поддержка 36
Замечания
Полная поддержка 36
Замечания
Замечания No support for inline option.
Замечания Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
Opera Android Полная поддержка 45
Замечания
Полная поддержка 45
Замечания
Замечания The block and inline options support the values start, center, end, nearest.
Safari iOS Нет поддержки НетSamsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.

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