Самый лёгкий способ записать плавный скролл веб-страницы
- Запустите запись экрана (любая удобная программа или встроенный инструмент ОС).
- Откройте нужную страницу в браузере и заранее выставьте желаемое разрешение (например, десктоп 1440 × 900).
- Нажмите F12 или ⌥⌘I, чтобы открыть DevTools, перейдите на вкладку Console и вставьте скрипт:
document.documentElement.style.scrollBehavior='smooth';
const STEP = 2;
const PAUSE = 0;
function autoScroll() {
if (window.scrollY+window.innerHeight >= document.body.scrollHeight) return;
window.scrollBy(0,STEP);
PAUSE ? setTimeout(autoScroll, PAUSE) : requestAnimationFrame(autoScroll);
}
autoScroll();
Объясняю действие кода для плавной прокрутки страницы:
// включаем плавное поведение прокрутки
document.documentElement.style.scrollBehavior = 'smooth';
// настраиваем параметры
const STEP = 2; // пикселей за “тик”
const PAUSE = 0; // задержка в миллисекундах (0 = максимально плавно)
// автоскролл
function autoScroll() {
if (window.scrollY + window.innerHeight >= document.body.scrollHeight) return;
window.scrollBy(0, STEP);
PAUSE ? setTimeout(autoScroll, PAUSE) : requestAnimationFrame(autoScroll);
}
autoScroll();
document.documentElement.style.scrollBehavior = 'smooth';
// настраиваем параметры
const STEP = 2; // пикселей за “тик”
const PAUSE = 0; // задержка в миллисекундах (0 = максимально плавно)
// автоскролл
function autoScroll() {
if (window.scrollY + window.innerHeight >= document.body.scrollHeight) return;
window.scrollBy(0, STEP);
PAUSE ? setTimeout(autoScroll, PAUSE) : requestAnimationFrame(autoScroll);
}
autoScroll();
Как ускорить или замедлить прокрутку
[STEP]
- Эффект: Размер «шага». Чем больше значение, тем быстрее идёт скролл.
- Пример: const STEP = 5; — быстрый пролёт страницы.
[PAUSE]
- Эффект: Пауза между шагами (мс). Чем больше число, тем медленнее и более «кинематографично» движение.
- Пример: const PAUSE = 16; ≈ 60 fps (16 мс).
Простой ориентир
- Лёгкая демонстрация блок-за-блоком — STEP = 1–2, PAUSE = 10–16.
- Спринт до конца страницы — STEP = 8–10, PAUSE = 0.
Измените цифры прямо в консоли и перезапустите autoScroll();, чтобы сразу увидеть разницу.
В Telegram-канале FullStack Design я регулярно выкладываю короткие лайфхаки, готовые сниппеты и вдохновляющие идеи для веб-дизайнеров и разработчиков. Подписывайтесь, чтобы не пропустить новое!
Проконсультирую по коду, если в процессе возникли проблемы!