Задать вопрос
aliencash
@aliencash
Партизан
css

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

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

Нужно для экрана 320х480 вывести всплывающую форму, поверх всей страницы, с затененным фоном. Если форма не укладывается в высоту 480px, нажать кнопку внизу формы пользователю не удастся. Сделать форму по высоте менее экрана - не вариант, т.к. существует еще и ландшафтный режим. В общем надо как-то скроллировать форму, но как, если она дочерний элемент затеняющего фон div'a?
  • Вопрос задан
  • 946 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
abaddon65
@abaddon65
В вашем варианте так:
#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, чтобы не было двойного скроллбара.
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
breefix
@breefix
Технолог
Реализацию такого поведения можно посмотреть у Twitter Bootstrap в модальных окнах.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Младший системный аналитик
20 апр. 2024, в 12:50
30000 руб./за проект
Скопировать верстку, посадить на функционал
20 апр. 2024, в 12:01
20000 руб./за проект
Разработать сайт-визитку на Wordpress
20 апр. 2024, в 11:52
5000 руб./за проект
Ещё заказы