Как заблокировать скролл страницы?

Question

[mxbeat]

Подскажите современное хорошее решение для блокировки скролла body во время открытия модального окна или меню, может javascript библиотека какая-то есть хорошая есть, а то все ответы на этот вопрос написаны более 3 лет назад.

Нужно чтобы во время блокировки скролла:
1. Страница не дергалась из-за исчезновения полосы прокрутки.
2. Позиция скролла запоминалась и не перебрасывало в начало страницы.
3. Внутри модалок скролл работал.
4. Блокировка работала в iOS без глюков и чтобы адресная строка браузера не выскакивала при блокировке.

Answer 1

[Сергей delphinpro]

Современное решение без javascript

.modal-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* То, что нужно */
    overscroll-behavior: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/o...
Поддержка 87% https://caniuse.com/css-overscroll-behavior

Comments

[mxbeat]

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

Answer 2

[Anonymous_toaster]

тупа убери скроллы
css

overflow-x: hidden //горизонтальный вроде
overflow-y: hidden //вертикальный вроде