Прокрутка и scrollIntoView

У каждого прокручиваемого элемента есть scrollTop — сколько пикселей содержимого уехало вверх за верхнюю границу. Ноль — самый верх, максимум примерно равен scrollHeight - clientHeight: это те самые размеры из статьи «Размеры элемента: offset, client, scroll», где остаток до низа уже считали. Свойство не только читается, но и записывается: присвоил число — блок мгновенно прыгнул. Больше максимума присвоить нельзя, браузер молча обрежет.

Для страницы целиком ту же роль играет window.scrollY (и window.scrollX по горизонтали). Это ровно то же число, что document.documentElement.scrollTop, только доступное лишь на чтение. Старое имя pageYOffset — полный синоним, его ещё встретишь в чужом коде.

console.log(window.scrollY === document.documentElement.scrollTop);
console.log(window.pageYOffset === window.scrollY);
console.log(typeof window.scrollY);

const box = document.getElementById("box");
box.style.height = "60px";
box.style.overflow = "auto"; // теперь это окно прокрутки

console.log(box.scrollTop);

box.scrollTop = 100000; // просим уехать нереально далеко
console.log(box.scrollTop > 0);
console.log(box.scrollTop < 100000);

Присваивать scrollTop руками приходится редко: есть scrollTo — прокрутить к указанной позиции, и scrollBy — сдвинуть относительно текущей. Оба метода есть и у элементов, и у window: window.scrollTo(0, 0) — классическая кнопка «наверх».

У каждого две формы вызова. Короткая берёт два числа в порядке x, y — порядок легко перепутать, потому что читаем мы обычно «сверху вниз». Объектная форма { top, left, behavior } длиннее, зато самоописательна, а left в ней можно не указывать.

const box = document.getElementById("box");
box.style.height = "50px";
box.style.overflow = "auto";

box.scrollTo(0, 40); // короткая форма: сначала x, потом y
console.log(box.scrollTop);

box.scrollBy(0, 10); // относительно текущей позиции
console.log(box.scrollTop);

box.scrollTo({ top: 0 }); // объектная форма, left не обязателен
console.log(box.scrollTop);

У объектной формы есть behavior: "instant" — мгновенно, "smooth" — с анимацией, "auto" (по умолчанию) — «как решит CSS». Именно поэтому свойство scroll-behavior: smooth на контейнере делает плавным даже обычное присваивание scrollTop: оно тоже считается прокруткой в режиме auto. А явный "instant" сильнее CSS всегда.

Главная ловушка плавности — асинхронность. Сразу после вызова с "smooth" в scrollTop лежит ещё старое значение: анимация идёт по кадрам. Если нужно что-то сделать по прибытии, слушай событие scrollend, а не читай позицию следующей строкой.

const box = document.getElementById("box");
box.style.height = "50px";
box.style.overflow = "auto";
box.style.scrollBehavior = "smooth"; // все auto-прокрутки теперь анимируются

console.log(getComputedStyle(box).scrollBehavior);

box.scrollTo({ top: 40, behavior: "instant" });
console.log(box.scrollTop);

Плавность нравится не всем. У части людей в системе включено prefers-reduced-motion, и длинная анимация прокрутки для них не красота, а укачивание. Проверяется одной строкой: window.matchMedia("(prefers-reduced-motion: reduce)").matches — и behavior становится instant.

Для прокруток в режиме auto ту же просьбу учитывают и без скрипта: scroll-behavior: smooth кладут внутрь @media (prefers-reduced-motion: no-preference) { … }, и плавность достаётся только тем, кто меньше движения не просил. Сам медиазапрос и то, зачем людям эта настройка, разобраны в прологе — меньше движения по просьбе человека.

Чаще всего задача звучит не «прокрути на 340 пикселей», а «покажи вот этот элемент». Для неё есть element.scrollIntoView() — вся арифметика с координатами остаётся браузеру. Важная деталь: метод прокручивает все прокручиваемые предки, а не только ближайший, поэтому элемент действительно окажется на виду.

Настраивают его два ключа — block (вертикаль) и inline (горизонталь), плюс знакомый behavior. По умолчанию { block: "start", inline: "nearest" }. Самое вежливое значение — "nearest": если элемент и так виден, прокрутки не будет вовсе.

const box = document.getElementById("box");
box.style.height = "40px";
box.style.overflow = "auto";

const target = document.getElementById("f");
console.log(box.scrollTop);

target.scrollIntoView({ block: "start" });
console.log(box.scrollTop > 0);

const boxRect = box.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
console.log(targetRect.top >= boxRect.top - 1);
console.log(targetRect.bottom <= boxRect.bottom + 1);

const box = document.getElementById("box");
box.style.height = "60px";
box.style.overflow = "auto";

const target = document.getElementById("target");
target.style.scrollMarginTop = "24px"; // запас под липкую шапку
console.log(getComputedStyle(target).scrollMarginTop);

target.scrollIntoView({ block: "start" });
const gap = target.getBoundingClientRect().top - box.getBoundingClientRect().top;
console.log(gap > 20);

Когда открыт диалог, фон прокручиваться не должен. Базовый приём — overflow: hidden на контейнере, для страницы это document.body.style.overflow = "hidden". Элемент при этом не перестаёт быть окном прокрутки: позиция сохраняется, программный scrollTo продолжает работать — запрещён только жест пользователя.

Две ловушки. Первая: у страницы исчезает полоса прокрутки, видимая ширина растёт, и весь макет дёргается вправо — лечится компенсирующим padding-right. Вторая: прокрутка внутри самой модалки, докрутившись до края, «протекает» на фон — лечится overscroll-behavior: contain на её содержимом.

const host = document.getElementById("host");
host.style.height = "50px";
host.style.overflow = "auto";
host.scrollTop = 30;

host.style.overflow = "hidden"; // замок
console.log(getComputedStyle(host).overflow);
console.log(host.scrollTop);

host.style.overflow = "auto"; // отпускаем
console.log(host.scrollTop);

const gap = window.innerWidth - document.documentElement.clientWidth;
let savedY = 0;

function lock() {
  savedY = window.scrollY;
  document.body.style.overflow = "hidden";
  document.body.style.paddingRight = gap + "px"; // чтобы макет не дёрнулся
}

function unlock() {
  document.body.style.overflow = "";
  document.body.style.paddingRight = "";
  window.scrollTo(0, savedY);
}

lock();
console.log(getComputedStyle(document.body).overflow);
unlock();
console.log(gap >= 0);

Событие scroll вешается на прокручиваемый элемент, а для страницы — на window или document. У него два характерных свойства. Во-первых, оно неотменяемое: preventDefault внутри обработчика ничего не остановит, прокрутка уже случилась. Во-вторых, оно приходит не мгновенно после изменения scrollTop, а перед отрисовкой ближайшего кадра.

Отсюда правило: в обработчике только запоминаем позицию, а всё тяжёлое — чтение размеров, классы, анимации — делаем внутри requestAnimationFrame, иначе страница начнёт заикаться. А если вопрос звучит как «виден ли элемент» — бесконечная лента, ленивая загрузка, подсветка пункта меню — бери IntersectionObserver: он решает ту же задачу вообще без обработчика прокрутки.

const box = document.getElementById("box");
box.style.height = "50px";
box.style.overflow = "auto";

let last = -1;
box.addEventListener("scroll", () => { last = box.scrollTop; });

box.scrollTop = 20;
console.log(last);

box.dispatchEvent(new Event("scroll")); // вызываем сами, чтобы не ждать
console.log(last);