Элемент: метод scrollIntoView()

Базовая линия Широко доступен

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с сентября 2020 года.

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

Синтаксис

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

Параметры

alignToTop Необязательно

Булево значение:

Если true, верхняя часть элемента будет выровнена по верхней части видимой области прокручиваемого предка. Соответствует scrollIntoViewOptions: {block: "start", inline: "nearest"}. Это значение по умолчанию.
Если false, нижняя часть элемента будет выровнена по нижней части видимой области прокручиваемого предка. Соответствует scrollIntoViewOptions: {block: "end", inline: "nearest"}.

scrollIntoViewOptions Необязательно Экспериментально

Объект со следующими свойствами:

behavior Необязательно

Определяет, будет ли прокрутка мгновенной или анимированной. Этот параметр — строка, которая должна принимать одно из следующих значений:

smooth: прокрутка должна быть анимированной
instant: прокрутка должна произойти мгновенно одним скачком
auto: поведение прокрутки определяется вычисленным значением scroll-behavior

block Необязательно

Определяет вертикальное выравнивание элемента внутри контейнера прокручиваемого предка. Этот параметр — строка и принимает одно из следующих значений:

start: Выравнивает верхний край элемента с верхней частью контейнера прокрутки, делая элемент видимым в начале области просмотра по вертикали.
center: Вертикально выравнивает элемент по центру контейнера прокрутки, размещая его посередине видимой области.
end: Выравнивает нижний край элемента с нижней частью контейнера прокрутки, помещая элемент в конец видимой области по вертикали.
nearest: Прокручивает элемент к ближайшему краю в вертикальном направлении. Если элемент ближе к верхнему краю контейнера прокрутки, он выравнивается по верху; если он ближе к нижнему краю, он выравнивается по низу. Это минимизирует расстояние прокрутки.
По умолчанию start.

inline Необязательно

Определяет горизонтальное выравнивание элемента внутри контейнера прокручиваемого предка. Этот параметр — строка и принимает одно из следующих значений:

start: Выравнивает левый край элемента с левой частью контейнера прокрутки, делая элемент видимым в начале области просмотра по горизонтали.
center: Горизонтально выравнивает элемент по центру контейнера прокрутки, размещая его посередине видимой области.
end: Выравнивает правый край элемента с правой частью контейнера прокрутки, помещая элемент в конец видимой области по горизонтали.
nearest: Прокручивает элемент к ближайшему краю в горизонтальном направлении. Если элемент ближе к левому краю контейнера прокрутки, он выравнивается по левому краю; если он ближе к правому краю, он выравнивается по правому. Это минимизирует расстояние прокрутки.
По умолчанию nearest.

Возвращаемое значение

Ничего (undefined).

Примеры

Использование scrollIntoView()

const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

Управление выравниванием поверху/внизу

По умолчанию элемент выравнивается по верхнему (или нижнему) краю прокручиваемого предка. Чтобы задать пользовательское расстояние, используйте scroll-margin-top или scroll-margin-bottom. Это часто бывает полезно, когда на странице есть фиксированный заголовок.

HTML

<body>
  <header class="navbar">Navbar</header>
  <main class="content">
    <button id="go-to-bottom">Go to bottom</button>
    <button id="go-to-top">Go to top</button>
  </main>
</body>

CSS

.navbar {
  height: 50px;
  position: sticky;
  top: 0;
  border-bottom: 1.5px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  height: 2000px;
  position: relative;
}
#go-to-bottom {
  position: absolute;
  top: 10px;
  /* Without this, the button will be aligned to the top of the page
  instead of bottom of navbar when scrolled */
  scroll-margin-top: 60px;
}
#go-to-top {
  position: absolute;
  bottom: 10px;
  scroll-margin-bottom: 0;
}

JavaScript

const goToTop = document.getElementById("go-to-top");
const goToBottom = document.getElementById("go-to-bottom");
goToBottom.addEventListener("click", () => {
  goToTop.scrollIntoView({ behavior: "instant", block: "end" });
});
goToTop.addEventListener("click", () => {
  goToBottom.scrollIntoView({ behavior: "instant", block: "start" });
});

Результат

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

Спецификация
Модуль CSSOM View # dom-element-scrollintoview

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`scrollIntoView`	1	79 17–79 Поддерживается только параметр `alignToTop`. 12–17 ["Поддерживается только для `HTMLElement`, а не для всех объектов `Element`, таких как `SVGElement`.", "Нет поддержки для параметра `smooth` поведение."]	1	≤12.1	3 ["Нет поддержки параметра `center`.", "До версии Safari 15.4 не было поддержки поведения `smooth`."]	18	4	≤12.1	1 ["Нет поддержки параметра `center`.", "До iOS 15.4 не было поддержки поведения `smooth`."]	1.0	4.4
`options_parameter`	61 Параметры `block` и `inline` поддерживают значения `start`, `center`, `end`, `nearest`.	79 Параметры `block` и `inline` поддерживают значения `start`, `center`, `end`, `nearest`.	36 ["Нет поддержки параметра `inline`.", "До Firefox 58 значения `nearest` и `center` для параметра `block` не поддерживались. См. ошибку 1389274."]	48 Параметры `block` и `inline` поддерживают значения `start`, `center`, `end`, `nearest`.	14	61 Параметры `block` и `inline` поддерживают значения `start`, `center`, `end`, `nearest`.	36 ["Нет поддержки параметра `inline`.", "До Firefox для Android 58 значения `nearest` и `center` для параметра `block` не поддерживались. См. ошибку 1389274."]	45 Параметры `block` и `inline` поддерживают значения `start`, `center`, `end`, `nearest`.	14	8.0 Параметры `block` и `inline` поддерживают значения `start`, `center`, `end`, `nearest`.	61 Параметры `block` и `inline` поддерживают значения `start`, `center`, `end`, `nearest`.

См. также

Element.scrollIntoViewIfNeeded() Нестандартно

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView