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