Element.scrollIntoView()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.
Метод Element.scrollIntoView()
интерфейса Element
прокручивает контейнер родителя элемента так, чтобы элемент, на котором был вызван scrollIntoView()
, стал виден пользователю.
Синтаксис
element.scrollIntoView(); element.scrollIntoView(alignToTop); // аргумент типа Boolean element.scrollIntoView(scrollIntoViewOptions); // аргумент типа Object
Параметры
alignToTop
Необязательный-
Параметр типа
Boolean
:true
, верхняя граница элемента будет выровнена по верху видимой области прокрутки. СоответствуетscrollIntoViewOptions: {block: "start", inline: "nearest"}
. Значение по умолчанию.false
, нижняя граница элемента будет выровнена по низу видимой области прокрутки. СоответствуетscrollIntoViewOptions: {block: "end", inline: "nearest"}
scrollIntoViewOptions
Необязательный Экспериментальная возможность-
Объект со следующими свойствами:
behavior
Необязательный-
Анимация прокрутки. Принимает значения
"auto"
или"smooth"
. По умолчанию"auto"
. block
Необязательный-
Вертикальное выравнивание. Одно из значений:
"start"
,"center"
,"end"
или"nearest"
. По умолчанию"start"
. 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);
Результат
Примечание
Область может не полностью прокручивается до элемента (вверх или вниз), это зависит от расположения других элементов.
Спецификации
Specification |
---|
CSSOM View Module # dom-element-scrollintoview |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Element.scrollIntoViewIfNeeded()
Non-standard