Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як заблокувати прокрутку сторінки?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 1. Найпростіший і надійний спосіб - через CSS (`overflow: hidden`)

Браузер дозволяє заблокувати прокрутку всієї сторінки,
якщо на `<body>` (або `<html>`) встановити `overflow: hidden`.

```javascript
document.body.style.overflow = 'hidden'; // блокуємо скрол
```

Щоб повернути назад:

```javascript
document.body.style.overflow = ''; // розблоковуємо
```

Це **найпоширеніший спосіб** -
сторінка залишається на місці, колесо миші і тач-скрол не працюють.

## 2. Зручна функція для вмикання/вимикання скролу

```javascript
function disableScroll() {
  document.body.style.overflow = 'hidden';
}

function enableScroll() {
  document.body.style.overflow = '';
}
```

Використання:

```javascript
openModalBtn.addEventListener('click', disableScroll);
closeModalBtn.addEventListener('click', enableScroll);
```

## 3. Просунутий спосіб - зберегти позицію (щоб не "стрибало")

Якщо сторінка була проскрольована, і ти просто робиш `overflow: hidden`,
контент може **смикнутися** через зникнення смуги прокрутки.

Ось правильний спосіб з фіксацією позиції:

```javascript
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-клас

Зручно, якщо ти часто відкриваєш модалки:

```javascript
/* styles.css */
.no-scroll {
  overflow: hidden;
}
```

```javascript
document.body.classList.add('no-scroll'); // заблокувати
document.body.classList.remove('no-scroll'); // розблокувати
```

Чисто, зручно і легко масштабується.

## 5. Особливий випадок - блокування скролу на мобільних пристроях

На iOS `overflow: hidden` **іноді не допомагає** при тач-скролі всередині `<body>`.
Тоді використовують перехоплення `touchmove`:

```javascript
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()` захищає від тач-скролу на мобільних.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати350 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.