JS метод Object.scrollBy()

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

scrollBy() - це метод об'єкта Window у мові програмування JavaScript, призначений для програмної прокрутки вікна на певну кількість пікселів в заданому напрямку. Його основна сутність полягає в тому, щоб забезпечити можливість динамічного зміщення прокрутки сторінки, що може бути корисним для реалізації плавного прокручування, анімацій чи інших ефектів.

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

Застосування на практиці: Почнемо з базового використання scrollBy() для прокрутки вниз на 100 пікселів:

// Прокрутити вниз на 100 пікселів
window.scrollBy(0, 100);

У цьому прикладі scrollBy(0, 100) означає, що вікно буде прокручено на 100 пікселів вниз. Подібно до цього, можна використовувати scrollBy(0, -100) для прокрутки вгору на 100 пікселів.

Тепер розглянемо сценарій, де scrollBy() використовується відповідно до дій користувача, наприклад, при кліку на кнопку:

// Прокрутити вниз на 200 пікселів при кліку на кнопку з id="scrollButton"
var scrollButton = document.getElementById('scrollButton');

scrollButton.addEventListener('click', function() {
    window.scrollBy(0, 200);
});

У цьому випадку, коли користувач клікає на кнопку з ідентифікатором scrollButton, вікно автоматично прокручується вниз на 200 пікселів. Такий підхід може бути використаний для створення кнопок "прокрутити вгору" або "прокрутити вниз" на веб-сторінці.

Також, scrollBy() може бути використаний для створення плавних анімацій прокрутки. Розглянемо випадок, де прокрутка анімується протягом 500 мілісекунд:

// Плавна анімація прокрутки вниз на 300 пікселів протягом 500 мілісекунд
function smoothScrollDown() {
    window.scrollBy({
        top: 300,
        behavior: 'smooth'
    });
}

У цьому прикладі метод scrollBy() викликається з об'єктом параметрів, включаючи behavior: 'smooth', що забезпечує плавну анімацію прокрутки вниз на 300 пікселів протягом 500 мілісекунд.

З використанням scrollBy() можна створювати динамічні та адаптивні ефекти прокрутки, роблячи користування веб-сторінкою більш захоплюючим та комфортним.

правити

Порада

Використовуйте scrollBy() для створення адаптивного інтерфейсу, який реагує на розмір екрану користувача. Наприклад, під час обробки подій зміни розміру вікна можна викликати scrollBy() для плавної коригування положення.

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

Порада

Застосовуйте scrollBy() для створення плавних переходів між різними частинами сторінки. Наприклад, при використанні навігаційного меню можна викликати метод, щоб плавно прокрутити до обраного розділу.

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

Порада

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

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

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

Синтаксис

scrollBy(x-coord, y-coord)
scrollBy(options)

Параметри

xOffset

Зміщення по горизонталі, вказане у пікселях.

автор: Bond

правити

yOffset

Зміщення по вертикалі, вказане у пікселях.

автор: Bond

правити

Повернення

none

Повертає undefined.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	1	1	3	12	11

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

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

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

Переглядач
	—

Приклади

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

// Прокрутка сторінки на 300 пікселів вниз при завантаженні
window.scrollBy(0, 300);

<button onclick="smoothScrollToElement()">Прокрутити до елемента</button>

<div id="targetElement" style="height: 500px; border: 1px solid #ccc; margin-top: 500px;">
  <!-- Контент цільового елемента -->
</div>

<script>
  // Функція для плавної прокрутки до цільового елемента
  function smoothScrollToElement() {
    // Отримання вертикальної позиції цільового елемента
    const targetElementPosition = document.getElementById('targetElement').offsetTop;

    // Використання scrollBy() для плавної прокрутки
    window.scrollBy({
      top: targetElementPosition,
      left: 0,
      behavior: 'smooth' // Встановлення плавної анімації
    });
  }
</script>