логотип PurpleSchool
логотип PurpleSchool

.scrollBy() в JavaScript

Автор

Дмитрий Нечаев

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

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

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

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

window.scrollBy(x, y);

Где:

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

Метод .scrollBy() позволяет прокрутить страницу на определенное количество пикселей по горизонтали и вертикали. Это полезно для создания эффектов параллакса, реализации пользовательских элементов управления прокруткой и других интерактивных эффектов. Если вы хотите детальнее изучить анимацию в JavaScript и создавать нестандартные решения в управлении страницей — приходите на наш большой курс JavaScript с нуля. На курсе 198 уроков и 30 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Примеры использования .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.

Использование .scrollBy() позволяет реализовать множество креативных и интересных эффектов на вашем сайте, но нужно понимать, что он является лишь одним из инструментов для управления прокруткой. Для получения фундаментальных знаний и лучших практик, мы рекомендуем наш курс JavaScript с нуля. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир JavaScript прямо сегодня.

Стрелочка влево.scrollIntoView() в JavaScript.removeProperty() в JavaScriptСтрелочка вправо

Постройте личный план изучения Javascript до уровня Middle — бесплатно!

Javascript — часть карты развития Frontend

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний

Лучшие курсы по теме

изображение курса

Основы JavaScript

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.8
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

TypeScript с нуля

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.7
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

Next.js - с нуля

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.7
3 999 ₽ 6 990 ₽
Подробнее

Отправить комментарий