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()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

Параметри

scrollIntoViewOptions

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

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

Return

none

Повертає undefined.

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

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

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

// Функція для пошуку першого елемента, який знаходиться за межами видимої області
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' // Вирівнювання елемента найближче до видимої області по горизонталі
    });
  }
}