Дмитрий Нечаев
.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 прямо сегодня.
Постройте личный план изучения Javascript до уровня Middle — бесплатно!
Javascript — часть карты развития Frontend
100+ шагов развития
30 бесплатных лекций
300 бонусных рублей на счет
Бесплатные лекции
Все гайды по Javascript
Лучшие курсы по теме

Основы JavaScript
Антон Ларичев
TypeScript с нуля
Антон Ларичев