5 методов контроля прокрутки страницы для веб-разработчиков

Для кого эта статья:

• Фронтенд-разработчики
• UX/UI дизайнеры

• Студенты и обучающиеся веб-разработке

  Контроль прокрутки страницы — это тот тонкий инструмент, который разделяет просто работающие сайты от действительно профессиональных интерфейсов. 🚀 Отключение скролла в нужный момент может радикально улучшить UX при работе с модальными окнами, сделать навигацию интуитивной или спасти от ненужных проблем при реализации сложных интерактивных элементов. Каждый фронтенд-разработчик рано или поздно сталкивается с задачей: "Как элегантно заблокировать прокрутку страницы?" — и сегодня я представляю 5 проверенных боевых методов, от простейших CSS-решений до продвинутых JavaScript-техник.

Хотите не просто копировать готовые решения, а понимать принципы работы с прокруткой и другими аспектами веб-разработки на глубоком уровне? Обучение веб-разработке от Skypro — это именно то, что вам нужно. Программа построена на реальных проектах, где блокировка скролла, работа с позиционированием и другие продвинутые техники верстки являются частью практических заданий под наставничеством действующих разработчиков.

Почему разработчики блокируют прокрутку страницы

Блокировка прокрутки — не прихоть перфекциониста, а необходимый инструмент в арсенале фронтенд-разработчика. Существует несколько важных сценариев, когда отключение скролла не просто желательно, а критически необходимо:

• Модальные окна и диалоги — предотвращает скроллинг основной страницы под модальным окном, что может сбивать пользователя с толку
• Выпадающие меню — помогает избежать случайного скролла страницы при взаимодействии с меню
• Полноэкранные галереи — улучшает пользовательский опыт при просмотре изображений
• Экраны загрузки — не позволяет взаимодействовать с контентом, пока идет загрузка
• Специальные анимации — требуют контроля над прокруткой для корректного отображения

Реализация контроля прокрутки напрямую влияет на показатели UX: согласно исследованиям, пользователи на 48% реже покидают сайт при грамотной работе модальных окон с блокировкой скролла по сравнению с реализациями, где основная страница продолжает скроллиться.

Алексей Котов, Senior Frontend Developer Однажды я разрабатывал лендинг для продажи премиальных товаров с множеством модальных окон. Клиент жаловался, что конверсия ниже ожидаемой. Проведя анализ поведения пользователей, мы обнаружили, что многие закрывали модальные окна из-за того, что случайно скроллили основную страницу под модалкой, теряя фокус на форме заказа. Реализовав грамотную блокировку прокрутки, мы увеличили конверсию формы на 23% за первую неделю. Казалось бы, мелочь, но такие детали напрямую влияют на доход проекта.

CSS-метод: отключение скролла с помощью overflow: hidden

Самый простой способ заблокировать прокрутку — применить CSS-свойство overflow: hidden к элементу body. Этот метод требует минимум кода и работает практически во всех браузерах. 🛠️

body {
overflow: hidden;
}

Однако у этого подхода есть существенные ограничения. При применении overflow: hidden страница может визуально "прыгать" из-за исчезновения полосы прокрутки. Кроме того, на iOS данное решение работает не всегда надежно.

Более комплексный CSS-подход — фиксация позиции с блокировкой прокрутки:

body.no-scroll {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}

Этот метод обеспечивает более надежную блокировку, но также может вызывать "прыжок" контента. Для решения этой проблемы можно добавить правый padding, равный ширине скроллбара:

body.no-scroll {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
padding-right: 17px; /* Приблизительная ширина скроллбара */
}

Ещё один вариант CSS-решения — использование комбинации свойств для элементов html и body:

html.no-scroll,
body.no-scroll {
overflow: hidden;
position: relative;
height: 100%;
}

Важно понимать преимущества и недостатки CSS-метода:

• Преимущества: простота реализации, минимум кода, высокая производительность
• Недостатки: проблемы на iOS, "прыжки" контента, потеря позиции прокрутки

Марина Соколова, UI/UX специалист В работе над маркетплейсом мы столкнулись с интересной проблемой. При открытии модального окна с быстрым просмотром товара на мобильных устройствах страница не блокировалась должным образом — пользователи случайно скроллили основной контент и модалка "плясала" по экрану. Изначально мы применили простой overflow: hidden, но на iOS это не решило проблему. Пришлось разработать комплексное решение с position: fixed для body и preventDefault для touchmove-событий. После внедрения мы получили восторженные отзывы от тестировщиков и увеличение времени, проводимого в модальном окне, на 34%. Это прямо повлияло на количество добавлений товара в корзину.

JavaScript-решения для запрета прокрутки на HTML-странице

Когда возможностей CSS недостаточно, на помощь приходит JavaScript. Он позволяет создать более гибкие и надежные решения для блокировки прокрутки. 🧩

Первый подход — использование preventDefault() для блокировки событий прокрутки:

// Блокировка прокрутки
function disableScroll() {
document.body.style.overflow = 'hidden';
document.addEventListener('wheel', preventDefaultScroll, { passive: false });
document.addEventListener('touchmove', preventDefaultScroll, { passive: false });
}

// Разблокировка прокрутки
function enableScroll() {
document.body.style.overflow = '';
document.removeEventListener('wheel', preventDefaultScroll);
document.removeEventListener('touchmove', preventDefaultScroll);
}

// Предотвращение события прокрутки
function preventDefaultScroll(e) {
e.preventDefault();
}

Этот метод надежно работает на различных устройствах, включая iOS, но может вызывать проблемы с производительностью при частом использовании preventDefault().

Другой подход — блокировка прокрутки с помощью фиксации позиции:

// Переменная для хранения исходной позиции прокрутки
let scrollPosition = 0;

// Блокировка прокрутки
function disableScroll() {
scrollPosition = window.pageYOffset;
document.body.style.overflow = 'hidden';
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollPosition}px`;
document.body.style.width = '100%';
}

// Разблокировка прокрутки
function enableScroll() {
document.body.style.overflow = '';
document.body.style.position = '';
document.body.style.top = '';
document.body.style.width = '';
window.scrollTo(0, scrollPosition);
}

Преимущество этого метода в сохранении позиции прокрутки и более высокой производительности. Однако на некоторых устройствах могут возникать проблемы с фиксированным позиционированием.

Для критически важных случаев можно использовать комбинированный подход:

function disableScroll() {
// Сохраняем текущую позицию прокрутки
const scrollY = window.scrollY;

// Применяем CSS-блокировку
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollY}px`;
document.body.style.width = '100%';
document.body.style.overflow = 'hidden';

// Добавляем JavaScript-блокировку для надёжности
document.addEventListener('wheel', preventDefaultScroll, { passive: false });
document.addEventListener('touchmove', preventDefaultScroll, { passive: false });

// Сохраняем позицию для восстановления
document.body.dataset.scrollY = scrollY;
}

Стоит отметить, что существуют готовые библиотеки, например, body-scroll-lock, которые решают большинство проблем совместимости:

import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

// Получаем элемент, который должен прокручиваться
const targetElement = document.querySelector('#scrollable-element');

// Блокируем прокрутку body, но разрешаем для targetElement
disableBodyScroll(targetElement);

// Разблокировка
enableBodyScroll(targetElement);

Блокировка скролла с сохранением позиции прокрутки

Одна из наиболее сложных проблем при блокировке прокрутки — сохранение текущей позиции скролла. Когда пользователь прокрутил страницу, открыл модальное окно, а после закрытия оказался в начале страницы — это может вызвать фрустрацию. 📊

Рассмотрим методику, которая позволяет элегантно решить эту проблему:

// Объект для управления прокруткой
const scrollController = {
scrollPosition: 0,
disableScroll() {
// Запоминаем текущую позицию
scrollController.scrollPosition = window.pageYOffset;

// Фиксируем body
document.body.style.cssText = `
position: fixed;
top: -${scrollController.scrollPosition}px;
left: 0;
width: 100%;
overflow: hidden;
height: 100vh;
`;

// Добавляем отступ, равный ширине скроллбара
document.documentElement.style.scrollBehavior = 'unset';
},
enableScroll() {
// Восстанавливаем стили
document.body.style.cssText = '';
document.documentElement.style.scrollBehavior = '';

// Восстанавливаем позицию
window.scrollTo(0, scrollController.scrollPosition);
}
};

Этот метод работает следующим образом:

1. При вызове disableScroll() сохраняется текущее положение прокрутки
2. Применяется position: fixed к body, что блокирует прокрутку
3. Страница визуально остается в той же позиции благодаря отрицательному смещению top
4. При вызове enableScroll() стили сбрасываются, и страница программно прокручивается до сохраненной позиции

Для еще большей надежности можно добавить обработку ширины скроллбара:

const scrollController = {
scrollPosition: 0,
lockPadding: 0,

getScrollWidth() {
return window.innerWidth – document.documentElement.clientWidth;
},

disableScroll() {
this.scrollPosition = window.pageYOffset;
this.lockPadding = this.getScrollWidth();

document.body.style.cssText = `
position: fixed;
top: -${this.scrollPosition}px;
left: 0;
width: 100%;
overflow: hidden;
height: 100vh;
padding-right: ${this.lockPadding}px;
`;
},

enableScroll() {
document.body.style.cssText = '';
window.scrollTo(0, this.scrollPosition);
}
};

При использовании блокировки скролла с сохранением позиции следует учитывать несколько важных моментов:

• Элементы с position: fixed — могут требовать дополнительной обработки
• Изменение размеров окна — может привести к некорректному восстановлению позиции
• Доступность — необходимо обеспечить правильное взаимодействие для пользователей с ассистивными технологиями

Для элементов, которые должны оставаться фиксированными (например, шапка сайта), необходимо добавить компенсацию отступа:

const fixedElements = document.querySelectorAll('.fixed-element');

function adjustFixedElements(padding) {
fixedElements.forEach(el => {
el.style.paddingRight = padding;
});
}

// В методе disableScroll
adjustFixedElements(`${scrollController.lockPadding}px`);

// В методе enableScroll
adjustFixedElements('');

Учёт особенностей мобильных устройств при отключении скролла

Мобильные устройства представляют особый вызов при блокировке прокрутки страницы. Сенсорные взаимодействия, различные браузеры и операционные системы требуют специального подхода. 📱

На iOS основная проблема заключается в том, что overflow: hidden на body работает некорректно. Вместо этого требуется комбинация JavaScript и CSS:

function disableScrollIOS() {
// Сохраняем текущую позицию
const scrollPosition = window.pageYOffset;

// Блокируем прокрутку
document.body.style.position = 'fixed';
document.body.style.width = '100%';
document.body.style.top = `-${scrollPosition}px`;

// Обрабатываем touchmove события
document.addEventListener('touchmove', preventTouchMove, { passive: false });
}

function enableScrollIOS() {
// Извлекаем сохраненную позицию из стиля
const scrollY = Math.abs(parseInt(document.body.style.top || '0'));

// Восстанавливаем стили
document.body.style.position = '';
document.body.style.width = '';
document.body.style.top = '';

// Удаляем обработчик touchmove
document.removeEventListener('touchmove', preventTouchMove);

// Восстанавливаем позицию
window.scrollTo(0, scrollY);
}

function preventTouchMove(e) {
// Разрешаем скролл внутри элементов с классом .scrollable
if (e.target.closest('.scrollable')) {
return;
}
e.preventDefault();
}

Для Android устройств требуется учитывать особенности работы с высотой вьюпорта и виртуальной клавиатурой:

function handleAndroidSpecifics() {
// Устанавливаем фиксированную высоту вьюпорта
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// Пересчитываем при изменении ориентации
window.addEventListener('resize', handleAndroidSpecifics);

Комплексное решение, работающее на большинстве мобильных устройств:

const mobileScrollLock = {
// Определяем iOS
isIOS: /iPad|iPhone|iPod/.test(navigator.platform) || 
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1),

scrollPosition: 0,
bodyStyle: '',

disableScroll() {
// Сохраняем стили и позицию
this.scrollPosition = window.pageYOffset;
this.bodyStyle = document.body.style.cssText;

// Применяем блокировку
document.body.style.cssText = `
position: fixed;
top: -${this.scrollPosition}px;
left: 0;
width: 100%;
overflow: hidden;
`;

if (this.isIOS) {
document.addEventListener('touchmove', this.preventTouchMove, { passive: false });
}
},

enableScroll() {
// Восстанавливаем стили
document.body.style.cssText = this.bodyStyle;

// Восстанавливаем позицию
window.scrollTo(0, this.scrollPosition);

if (this.isIOS) {
document.removeEventListener('touchmove', this.preventTouchMove);
}
},

preventTouchMove(e) {
const target = e.target;
// Проверяем, нужно ли разрешить скролл в этом элементе
if (!target.closest('.scrollable') || 
target.closest('.scrollable').scrollHeight <= target.closest('.scrollable').clientHeight) {
e.preventDefault();
}
}
};

При работе с мобильными устройствами особое внимание следует обращать на тестирование. Таблица ниже поможет идентифицировать потенциальные проблемы:

• Тестируйте на реальных устройствах, а не только в эмуляторах
• Проверьте ландшафтную и портретную ориентации
• Учитывайте взаимодействие с клавиатурой для форм
• Проверяйте жесты (свайп, пинч и т.д.)
• Тестируйте на устройствах с разными размерами экрана

Правильная блокировка прокрутки — технический навык, который значительно повышает качество пользовательского опыта. Владение разными методами позволяет выбирать оптимальное решение для каждого конкретного случая, будь то простой CSS для десктопных браузеров или комплексный JavaScript для кроссплатформенной совместимости. Помните, что забота о таких деталях, как сохранение позиции прокрутки и учёт особенностей мобильных устройств, отличает по-настоящему профессиональную реализацию от любительской. Используйте эти инструменты с умом, и ваши пользователи оценят заботу о мельчайших аспектах взаимодействия с интерфейсом.