ScrollBy: примеры (JAVASCRIPT)

Примеры базового использования

Прокрутка окна вниз на 100 пикселей:

window.scrollBy(0, 100);

// Окно прокручивается на 100px вниз. Ничего не возвращается.

Прокрутка окна влево на 50 пикселей:

window.scrollBy(-50, 0);

// Окно прокручивается на 50px влево.

Прокрутка с плавным поведением (smooth scroll):

window.scrollBy({ top: 200, left: 0, behavior: 'smooth' });

// Окно плавно прокручивается на 200px вниз.

Прокрутка элемента:

document.getElementById('myDiv').scrollBy(0, 30);

// Элемент с id='myDiv' прокручивается на 30px вниз.

Похожие функции в JavaScript

scrollTo() - прокручивает к абсолютным координатам или к указанному элементу. В отличие от относительного scrollBy(), задает конечную позицию.

scroll() - синоним scrollTo() для совместимости. Рекомендуется использовать scrollTo().

scrollIntoView() - метод элемента, который прокручивает его родительский контейнер для отображения этого элемента в видимой области. Работает с абсолютным позиционированием элемента.

Выбор функции:

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

Типичные ошибки

1. Вызов метода на элементе, не имеющем прокрутки:

document.querySelector('span').scrollBy(0, 10);

// Uncaught TypeError: document.querySelector(...).scrollBy is not a function
// или метод выполнится, но без видимого эффекта.

2. Передача аргументов неправильного типа:

window.scrollBy('10', '20');

// Аргументы будут преобразованы к числам, но это неявное поведение, лучше использовать числа.

3. Игнорирование асинхронной природы smooth scroll при проверке позиции:

window.scrollBy({ top: 300, behavior: 'smooth' });
console.log(window.scrollY); // Не покажет итоговое значение сразу

// В консоли будет текущая позиция до завершения анимации.

4. Использование в окружении, где нет объекта window (например, Node.js):

// В Node.js
window.scrollBy(0, 100);

// ReferenceError: window is not defined

Изменения в спецификации

Основное изменение - добавление параметра options как альтернативы отдельным аргументам x и y. Это расширение позволяет задавать поведение прокрутки (behavior). Значение smooth для плавной прокрутки стало широко поддерживаться в современных браузерах (Chrome, Firefox, Safari, Edge). Ранее для аналогичного эффекта требовались полифилы или CSS-свойство scroll-behavior.

Также, метод был стандартизирован для объектов Element, что позволяет прокручивать не только окно, но и отдельные элементы с overflow: scroll.

Расширенные примеры использования

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

function smoothScrollBy(y, step = 10, delay = 20) {
    let scrolled = 0;
    const timer = setInterval(() => {
        window.scrollBy(0, step);
        scrolled += step;
        if(scrolled >= y) clearInterval(timer);
    }, delay);
}
smoothScrollBy(300);

// Окно прокручивается на 300px вниз с шагом 10px.

Обработка прокрутки с учетом направления:

function scrollDirectionBased(direction) {
    const step = 100;
    if(direction === 'up') window.scrollBy(0, -step);
    else if(direction === 'down') window.scrollBy(0, step);
}
// Вызов при клике на кнопки

// При direction='up' прокрутка на 100px вверх.

Интеграция с Intersection Observer для автоматической прокрутки при появлении элемента:

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            window.scrollBy(0, 50); // Сдвиг при видимости элемента
        }
    });
});
observer.observe(document.querySelector('.trigger'));

// При попадании элемента с классом .trigger в viewport, страница сдвигается на 50px вниз.

Комбинирование с requestAnimationFrame для высокой производительности:

function scrollByAnimation(y) {
    const start = window.scrollY;
    function step(timestamp) {
        // Простая линейная интерполяция
        const progress = Math.min((timestamp - startTime) / 500, 1);
        window.scrollTo(0, start + y * progress);
        if (progress < 1) requestAnimationFrame(step);
    }
    const startTime = performance.now();
    requestAnimationFrame(step);
}
scrollByAnimation(200);

// Плавная прокрутка на 200px за 500ms с использованием requestAnimationFrame.

Прокрутка внутри модального окна:

document.querySelector('.modal-content').scrollBy(0, 50);

// Прокручивается содержимое модального окна, а не основная страница.

Аналоги в других языках программирования

Прямых аналогов scrollBy в серверных языках нет, так как они не управляют браузерным окном. Однако, схожую логику можно реализовать:

Python (библиотека Selenium для автоматизации браузера):

from selenium import webdriver
driver = webdriver.Chrome()
driver.execute_script('window.scrollBy(0, 500);')

# Окно браузера прокручивается на 500px вниз.

PHP (генерирование JavaScript кода):

echo '<script>window.scrollBy(0, 100);</script>';

// На клиенте выполнится прокрутка.

C# (в контексте WebView в Windows Forms или WPF):

webBrowser1.Document.InvokeScript('execScript', new Object[] { 'window.scrollBy(0, 200);', 'JavaScript' });

// В элементе WebBrowser произойдет прокрутка.

Отличие в том, что эти языки лишь инициируют выполнение JavaScript, а не содержат встроенную функцию прокрутки.