Как зафиксировать страницу при открытии всплывающего окна с собственным скроллингом?

Question

[Amoled]

Есть страница со скроллингом, в любом месте которой может быть открыто всплывающее окно. Всплывающее окно может быть больше, чем высота экрана, соответственно в нем может понадобиться скроллинг. Как добиться того, чтобы скроллинг всей страницы при появлении всплывающего окна исчезал, и появлялся скроллинг контента в рамках всплывающего окна (на том же месте, общестраничный скроллинг). Речь конечно же не про внутренний скроллинг внутри DIV, а по общий скроллинг страниц. Пример - как сделано в ВКонтакте при открытии фотографий.

Answer 1

[Amoled]

В общем очень жаль, что на Тостере в принципе спрашивать бесполезно.

Ответ сам нашел - для блока, содержащего весь контент страницы, overflow: hidden должен стоять постоянно, и height: auto; Для фиксации контента при отображении всплывающего окна ставим height в $(window).height() + $(window).scrollTop(). Т.е. высота окна + текущее положение на странице, а также margin-top равный $(window).scrollTop()*-1.

Чтобы основной контент страницы не сдвигался при исчезновении прокрутки страницы (а прокрутка внитри блока - это прокрутка внутри блока, а не страницы), заранее для блока с данными страницы ставим width равный $(window).width(), т.е. фиксируем ширину блока как ширина блока с прокруткой. Тогда ничего никуда не уедет.

Чтобы в самом всплывающем окне всегда показывать контент с начала, а не с места, где остановились в последний раз, делаем .scrollTop(0) для блока с контентом.

Чтобы при закрытии окна ничего никуда не ускакивало - можно перед очисткой margin-top его запоминать, умножать на -1 вновь и делать scrollTop() для всей страницы на указанное значение.

Comments

[Дмитрий]

Вы считаете себя программистом? Тогда вы молодец - сейчас смогли сами решить банальную задачу. Если не программист, то зачем вам это?)

[Amoled]

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

[Дмитрий]

Amoled: а в вашем решении есть хоть один нюанс, требующий великой кроссбраузерности? Про overflow я написал еще в первом ответе. Дальше дело техники, все эти подгоны сдвигов и прочее.

[Amoled]

Дмитрий: в том то и дело, что нет. Я для того и создавал этот вопрос. Сделать и подогнать не проблема, проблема сделать это кроссбраузерно. Учесть все нюансы. А я увы не верстальщик и знать их не могу. Буду потом тестировать в разных браузерах сам. Потому и написал - очень жаль, что в Тостере спрашивать в принципе что-оибо бесполезно.

[y0u]

Amoled: вот и не спрашивайте - уходите отсюда.

[Антон]

На самом деле можно обойтись и без всяких компенсаций и оборачивающего блока. Вот пример моей реализации модального окна (код для реакта, но суть, думаю, понятна будет) https://github.com/y-components/y-modal/blob/maste... Кстати, еще нужно учесть: есть ли на странице скроллбар или нет, иначе при overflow: hidden будет скачек контента.

Также можете посмотреть реализацию модального окна бутстрапа.

[420873535]

vodkabears.github.io/remodal

[Minusator]

все верно, бесполезно. Для себя решил, что лучше задавать на западные аналоги тостера. Все свои проблемы решал на 99% именно там.

Answer 2

[Дмитрий]

Поставить для body стиль overflow:hidden ?!

Comments

[Ирина]

Спасибо за идею! Все гениальное - просто