@Amoled

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

Есть страница со скроллингом, в любом месте которой может быть открыто всплывающее окно. Всплывающее окно может быть больше, чем высота экрана, соответственно в нем может понадобиться скроллинг. Как добиться того, чтобы скроллинг всей страницы при появлении всплывающего окна исчезал, и появлялся скроллинг контента в рамках всплывающего окна (на том же месте, общестраничный скроллинг). Речь конечно же не про внутренний скроллинг внутри DIV, а по общий скроллинг страниц. Пример - как сделано в ВКонтакте при открытии фотографий.
  • Вопрос задан
  • 5682 просмотра
Решения вопроса 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() для всей страницы на указанное значение.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
thewind
@thewind
php программист, front / backend developer
Поставить для body стиль overflow:hidden ?!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы