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 |
Совместимость с браузерами
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scrollIntoView | ||||||||||||
options parameter |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- See implementation notes.
- Has more compatibility info.
Смотрите также
Element.scrollIntoViewIfNeeded()
Не стандартно