JS метод Element.scrollIntoView()

Загальний опис

scrollIntoView() - це метод інтерфейсу Element в JavaScript, який прокручує вікно браузера або батьківський контейнер для прокрутки, щоб зробити елемент видимим. Цей метод часто використовується для забезпечення зручної навігації та покращення взаємодії з користувачем на веб-сторінках. Він є особливо корисним у випадках, коли певний елемент знаходиться поза областю видимості, і потрібно плавно прокрутити сторінку до нього.

Використання Element.scrollIntoView() досить просте. Найпростіший спосіб викликати цей метод - це застосувати його до потрібного елемента без будь-яких аргументів:

const element = document.getElementById('myElement');
element.scrollIntoView();

У цьому прикладі метод scrollIntoView() викликається для елемента з ідентифікатором myElement, і вікно браузера прокручується, щоб зробити цей елемент видимим.

Метод scrollIntoView() також приймає об'єкт опцій як необов'язковий аргумент, що дозволяє налаштувати поведінку прокрутки. Наприклад, ви можете вказати, чи повинен елемент бути прокручений на початок або в кінець області видимості:

const element = document.getElementById('myElement');
element.scrollIntoView({ block: 'start' }); // Прокручує елемент на початок видимої області
element.scrollIntoView({ block: 'end' }); // Прокручує елемент в кінець видимої області

Ви також можете контролювати, чи повинен елемент бути вирівняний по горизонталі або вертикалі за допомогою властивості inline:

element.scrollIntoView({ block: 'nearest', inline: 'start' }); // Вирівнює елемент по лівому краю
element.scrollIntoView({ block: 'nearest', inline: 'end' }); // Вирівнює елемент по правому краю

Крім того, ви можете налаштувати поведінку прокрутки, вказавши, чи повинна вона відбуватися плавно або миттєво, за допомогою властивості behavior:

element.scrollIntoView({ behavior: 'smooth' }); // Плавна прокрутка
element.scrollIntoView({ behavior: 'auto' }); // Миттєва прокрутка (за замовчуванням)

Метод scrollIntoView() також може бути корисним у поєднанні з подіями, такими як click або scroll. Наприклад, ви можете прокручувати до певного елемента після натискання кнопки:

const button = document.getElementById('myButton');
const element = document.getElementById('myElement');

button.addEventListener('click', () => {
  element.scrollIntoView({ behavior: 'smooth' });
});

Або ви можете відстежувати подію scroll та виконувати певні дії, коли елемент стає видимим:

const element = document.getElementById('myElement');

window.addEventListener('scroll', () => {
  const rect = element.getBoundingClientRect();
  if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
    // Елемент видимий, виконати певні дії
    console.log('Елемент видимий');
  }
});

Загалом, Element.scrollIntoView() - це потужний і корисний метод для покращення взаємодії з користувачем та навігації на веб-сторінках. Він дозволяє плавно прокручувати сторінку до певного елемента, забезпечуючи зручний доступ до потрібного контенту. Крім того, цей метод можна налаштувати за допомогою різних опцій, щоб контролювати поведінку прокрутки та вирівнювання елементів.

Варто зазначити, що scrollIntoView() також можна використовувати для прокрутки батьківських контейнерів, які мають властивість overflow зі значенням auto або scroll. У такому випадку метод прокручує контейнер, а не вікно браузера:

<div id="container" style="height: 200px; overflow: auto;">
  <div id="child" style="height: 500px;">
    <!-- Контент -->
  </div>
</div>

const child = document.getElementById('child');
child.scrollIntoView();

У цьому прикладі метод scrollIntoView() викликається для елемента child, і батьківський контейнер container прокручується, щоб зробити цей елемент видимим.

Крім того, scrollIntoView() може бути корисним для забезпечення доступності веб-сторінок. Наприклад, ви можете використовувати його для автоматичного прокручування до певного елемента після завантаження сторінки або після виконання певної дії користувачем. Це може полегшити навігацію для користувачів з обмеженими можливостями або тих, хто використовує допоміжні технології, такі як скринридери.

window.addEventListener('load', () => {
  const importantElement = document.getElementById('important');
  importantElement.scrollIntoView({ behavior: 'smooth' });
});

У цьому прикладі після завантаження сторінки відбувається плавна прокрутка до елемента з ідентифікатором important.

Загалом, Element.scrollIntoView() є потужним інструментом для покращення взаємодії з користувачем та забезпечення зручної навігації на веб-сторінках. Його можна налаштувати та використовувати в поєднанні з різними подіями та іншими методами JavaScript для створення динамічних та доступних веб-додатків.

правити

Порада

Використовуйте scrollIntoView() для покращення доступності веб-сторінок. Ви можете автоматично прокручувати до певного елемента після завантаження сторінки або після виконання певної дії користувачем, щоб полегшити навігацію для користувачів з обмеженими можливостями або тих, хто використовує допоміжні технології.

автор: Bond правити

Порада

Налаштуйте поведінку прокрутки за допомогою об'єкта опцій scrollIntoView(). Ви можете вказати, чи повинен елемент бути прокручений на початок чи в кінець видимої області, вирівняти його по горизонталі або вертикалі, а також визначити, чи прокрутка повинна відбуватися плавно або миттєво.

element.scrollIntoView({ block: 'end', inline: 'start', behavior: 'smooth' });

автор: Bond правити

Порада

Використовуйте scrollIntoView() для забезпечення зручної навігації на веб-сторінці. Цей метод особливо корисний, коли потрібно прокрутити сторінку до певного елемента, наприклад, після натискання кнопки або після завантаження сторінки. Наприклад:

const button = document.getElementById('myButton');
const element = document.getElementById('myElement');

button.addEventListener('click', () => {
  element.scrollIntoView({ behavior: 'smooth' });
});

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

Параметри

scrollIntoViewOptions

Об'єкт з наступними властивостями:

• behavior: Рядок, що визначає поведінку прокрутки ("auto" або "smooth"). Визначає, чи прокрутка повинна відбуватися плавно, чи миттєво.
• block: Рядок, що визначає вертикальне вирівнювання ("start", "center", "end" або "nearest"). Визначає, чи елемент повинен бути прокручений на початок, в центр, в кінець або найближче до видимої області.
• inline: Рядок, що визначає горизонтальне вирівнювання ("start", "center", "end" або "nearest"). Визначає, чи елемент повинен бути вирівняний по лівому краю, по центру, по правому краю або найближче до видимої області.

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	≤12.1	79	5*

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div id="target">Демонстраційний елемент</div>

// Отримуємо елемент за його ідентифікатором
const targetElement = document.getElementById('target');

// Викликаємо метод scrollIntoView() на цільовому елементі
targetElement.scrollIntoView({
  behavior: 'smooth', // Плавна прокрутка
  block: 'nearest', // Вирівнювання елемента найближче до видимої області
  inline: 'nearest' // Вирівнювання елемента найближче до видимої області по горизонталі
});

<div class="item">перший елемент item</div>
<div class="item">другий елемент item</div>

// Функція для пошуку першого елемента, який знаходиться за межами видимої області
function findFirstInvisibleElement() {
  const elements = document.querySelectorAll('.item');

  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    const rect = element.getBoundingClientRect();

    // Перевіряємо, чи елемент знаходиться за межами видимої області
    if (rect.bottom > window.innerHeight) {
      return element;
    }
  }

  return null;
}

// Функція для прокручування сторінки до першого невидимого елемента
function scrollToFirstInvisibleElement() {
  const invisibleElement = findFirstInvisibleElement();

  if (invisibleElement) {
    invisibleElement.scrollIntoView({
      behavior: 'smooth', // Плавна прокрутка
      block: 'nearest', // Вирівнювання елемента найближче до видимої області
      inline: 'nearest' // Вирівнювання елемента найближче до видимої області по горизонталі
    });
  }
}