Як заблокувати прокрутку сторінки?
1. Найпростіший і надійний спосіб - через CSS (overflow: hidden)
Браузер дозволяє заблокувати прокрутку всієї сторінки,
якщо на <body> (або <html>) встановити overflow: hidden.
document.body.style.overflow = 'hidden'; // блокуємо скролЩоб повернути назад:
document.body.style.overflow = ''; // розблоковуємоЦе найпоширеніший спосіб - сторінка залишається на місці, колесо миші і тач-скрол не працюють.
2. Зручна функція для вмикання/вимикання скролу
function disableScroll() {
document.body.style.overflow = 'hidden';
}
function enableScroll() {
document.body.style.overflow = '';
}Використання:
openModalBtn.addEventListener('click', disableScroll);
closeModalBtn.addEventListener('click', enableScroll);3. Просунутий спосіб - зберегти позицію (щоб не "стрибало")
Якщо сторінка була проскрольована, і ти просто робиш overflow: hidden,
контент може смикнутися через зникнення смуги прокрутки.
Ось правильний спосіб з фіксацією позиції:
function disableScroll() {
const scrollY = window.scrollY;
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollY}px`;
document.body.style.width = '100%';
}
function enableScroll() {
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);
}Тепер сторінка залишається в тому самому місці, де користувач зупинився, і після розблокування повертається туди ж.
4. Альтернатива - CSS-клас
Зручно, якщо ти часто відкриваєш модалки:
/* styles.css */
.no-scroll {
overflow: hidden;
}document.body.classList.add('no-scroll'); // заблокувати
document.body.classList.remove('no-scroll'); // розблокуватиЧисто, зручно і легко масштабується.
5. Особливий випадок - блокування скролу на мобільних пристроях
На iOS overflow: hidden іноді не допомагає при тач-скролі всередині <body>.
Тоді використовують перехоплення touchmove:
function preventTouchScroll(e) {
e.preventDefault();
}
function disableScrollMobile() {
document.addEventListener('touchmove', preventTouchScroll, { passive: false });
}
function enableScrollMobile() {
document.removeEventListener('touchmove', preventTouchScroll);
}Цей спосіб можна поєднувати з overflow: hidden для надійності.
Підсумок
| Мета | Спосіб | Примітка |
|---|---|---|
| Просто заблокувати | document.body.style.overflow = 'hidden' | Підходить у 95% випадків |
| Зберегти позицію | position: fixed + top = -scrollY | Без "стрибка" при знятті блокування |
| Часте використання | Додавання класу .no-scroll | Зручно для модалок |
| Мобільна надійність | touchmove + preventDefault | Для iOS Safari |
Запам'ятай просто:
overflow: hiddenблокує прокрутку,position: fixedфіксує положення,touchmove.preventDefault()захищає від тач-скролу на мобільних.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.