Как запретить скролл body при открытии модального окна без прокрутки вверх страницы?

Question

[Адам Сулумов]

Здравствуйте,
Была задача запретить скролл body при открытии модального окна. Покопавшись в интернете, я нашел решение добавлять для body стили "overflow: hidden", но в таком случае страница прокручивалась вверх, а мне нужно, чтобы она оставалась на своей позиции и просто не прокручивалась.

Помогите решить проблему максимально простым способом. Спасибо.

Comments

[Алексей Ярков]

Почитал комменты, ответы и не понял - нахрена убирать скролл, если надо заглушить событие прокрутки на элементе под модалкой?
Ну есть скроллбар, и что? Ну пусть будет.
Просто не реагируем на прокрутку.

[Адам Сулумов]

Алексей Ярков, ок, как заглушить, чтобы ничего не дергалось?

[Алексей Ярков]

Адам Сулумов, например так
luxiyalu.com/playground/overlay
P.S. С телефона смотрю.

Answer 1

[wiyod]

Красивого и универсального решения не существует. Есть два варианта, при первом будет увеличиваться пространство страницы за счет исчезнувшего скролла, что само по себе не правильно (ну и запаришся искать все съесжающие элементы с fixed позишен), а второй, правильный вариант возможен только с броском страницы наверх (это можно испрвить вычисляя каждый раз расстояние прокрученное и добавлять top, но это УРОДСТВО ВСЕ).

Я забил и делаю с прокруткой. Сделать без прокрутки не сложно совсем, но это грязь.

Comments

[Exploding]

А чем же pointer-events не устроил? Прокрутка на месте, ниче не скролится... По-моему, это красивое универсальное решение. Не?

[wiyod]

Exploding, каким убразом pointer-events убирает скролл? Я не понимаю логику вашего решения. Такого способа не знаю. Ну добавили вы pointer-events к элементу, размеры которого превышают вьюпорт. Скролл как был так и остался.

[Exploding]

wiyod, Тут смысл в том, чтобы не со скролом баловаться, а просто сделать элемент неюзабельным. Т.е. не реагирующим на события в отношении него, в т.ч. и на события скрола.

[Exploding]

wiyod, он не убирает скрол, он как бы делает preventDefault() на все события. (Аналогия)

[wiyod]

Exploding, при чем тут pointer-events и скролл? Ну вы мочите.