Как сделать запись экрана с плавной прокруткой сайта

2025-07-31 23:39 Tilda

Самый лёгкий способ записать плавный скролл веб-страницы

Запустите запись экрана (любая удобная программа или встроенный инструмент ОС).
Откройте нужную страницу в браузере и заранее выставьте желаемое разрешение (например, десктоп 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();

Как ускорить или замедлить прокрутку

[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 я регулярно выкладываю короткие лайфхаки, готовые сниппеты и вдохновляющие идеи для веб-дизайнеров и разработчиков. Подписывайтесь, чтобы не пропустить новое!

Проконсультирую по коду, если в процессе возникли проблемы!

Ramilia Besay