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()` для плавної коригування положення.
Порада:	Застосовуйте `scrollBy()` для створення плавних переходів між різними частинами сторінки. Наприклад, при використанні навігаційного меню можна викликати метод, щоб плавно прокрутити до обраного розділу.
Порада:	Використовуйте `scrollBy()` для створення анімаційних ефектів при прокрутці сторінки. Наприклад, при події кліку на кнопці можна викликати метод, щоб плавно прокрутити до визначеного елемента з анімацією.

Синтаксис

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

Параметри

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

Return

none: Повертає undefined.

Переглядачі

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

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

Переглядач
	-	-

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/QWYepLy">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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

У цьому прикладі ми створили кнопку, при кліці на яку сторінка буде плавно прокручуватися до елемента з id targetElement. Використання scrollBy() з параметром behavior: 'smooth' дозволяє отримати ефект плавної анімації прокрутки.

<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>

JS довідник

JavaScript

Наповнення JS розділу