Метод .scrollBy() в JavaScript предоставляет возможность программно прокручивать страницу на указанные величины по горизонтали и вертикали. Этот метод особенно полезен, когда нам нужно управлять прокруткой страницы через скрипт, например, при выполнении определенного действия или отклике на событие. Давайте рассмотрим его использование подробнее с примерами.

Введение в .scrollBy()

Метод .scrollBy() вызывается на объекте window и позволяет прокручивать страницу на указанные величины по горизонтали и вертикали относительно ее текущего положения. Этот метод принимает два параметра: x (горизонтальная прокрутка) и y (вертикальная прокрутка), оба параметра задаются в пикселях.

Синтаксис метода .scrollBy() выглядит следующим образом:

window.scrollBy(x, y);

Где:

• x
  • это количество пикселей, на которое нужно прокрутить страницу по горизонтали.
• y
  • это количество пикселей, на которое нужно прокрутить страницу по вертикали.

Примеры использования .scrollBy()

Давайте рассмотрим несколько примеров использования метода .scrollBy() для прокрутки страницы на указанные величины.

1. Прокрутка страницы вниз на 100 пикселей при загрузке страницы

// Прокручиваем страницу вниз на 100 пикселей при загрузке страницы
window.onload = function() {
  window.scrollBy(0, 100);
};

В этом примере мы используем метод .scrollBy() для прокрутки страницы вниз на 100 пикселей сразу после загрузки страницы.

2. Прокрутка страницы вправо на 200 пикселей при нажатии на кнопку

<button id="scrollButton">Прокрутить вправо</button>

// Получаем ссылку на кнопку
const scrollButton = document.getElementById('scrollButton');

// Устанавливаем обработчик события на клик
scrollButton.addEventListener('click', function() {
  // Прокручиваем страницу вправо на 200 пикселей
  window.scrollBy(200, 0);
});

В этом примере мы используем метод .scrollBy() для прокрутки страницы вправо на 200 пикселей при клике на кнопку.

3. Прокрутка страницы вверх на 300 пикселей при скроллинге колесика мыши

// Устанавливаем обработчик события на скроллинг колесика мыши
window.addEventListener('wheel', function(event) {
  // Если скроллируем вверх
  if (event.deltaY < 0) {
    // Прокручиваем страницу вверх на 300 пикселей
    window.scrollBy(0, -300);
  }
});

В этом примере мы используем метод .scrollBy() для прокрутки страницы вверх на 300 пикселей при скроллинге колесика мыши вверх.

Заключение

Метод .scrollBy() предоставляет удобный способ программно управлять прокруткой страницы в JavaScript. Это особенно полезно для создания интерактивных элементов и улучшения пользовательского опыта. Мы рассмотрели его базовый синтаксис и примеры использования для различных сценариев. Надеюсь, данная статья помогла вам лучше понять, как использовать .scrollBy() в ваших проектах JavaScript.