Как сделать scroll элемента, родитель которого имеет position: fixed?

Question

[Андрей Федоров]

Модель тут - jsfiddle.net/aj73jn1w/2

Нужно для экрана 320х480 вывести всплывающую форму, поверх всей страницы, с затененным фоном. Если форма не укладывается в высоту 480px, нажать кнопку внизу формы пользователю не удастся. Сделать форму по высоте менее экрана - не вариант, т.к. существует еще и ландшафтный режим. В общем надо как-то скроллировать форму, но как, если она дочерний элемент затеняющего фон div'a?

Answer 1

[Михаил Горячкин]

В вашем варианте так:

#bg {
  background: rgba(0,0,0,.6);
  position: fixed;
  left: 0;
  top: 0;
  width: 320px;
  height: 100%;
  z-index: 100;
  overflow: auto;
}
#form {
  width: 150px;
  min-height: 520px;
  padding: .3em 1em;
  background: #fff;
  border-radius: 12px;
  z-index: 200;
  top: 20px;  
  margin: 1em auto;
}

Итого мы получим скролл когда текста станет столько, что он не будет умещаться по высоте. Только при открытии модального окна надо бы будет ставить body overflow: hidden, чтобы не было двойного скроллбара.

Comments

[Андрей Федоров]

))) Ну да, 2 скрола в окне браузера - это прикольно.
habrastorage.org/files/d91/fd9/8ff/d91fd98ff2e54c4...

[Михаил Горячкин]

Ну так про то и написал. Вешаете событие на вызов модального окна в котором добавляете к body класс, в котором будет overflow:hidden; А при закрытии окна удаляете этот класс. Вот и все.

[Андрей Федоров]

В общем сделал как высказали... Все работает, спасибо за помощь...

Answer 2

[Евгений]

Реализацию такого поведения можно посмотреть у Twitter Bootstrap в модальных окнах.