Комментарий VictorS к принятому ответу заслуживает своего собственного ответа, потому что это очень элегантное решение, которое действительно работает. И я добавлю немного полезности.
Заметки Виктора добавили, что position:fixed
работает.
body.modal-open {
overflow: hidden;
position: fixed;
}
И это действительно так. Тем не менее, он также имеет небольшое побочное воздействие, существенно прокручивающееся вверх. position:absolute
разрешает это, но повторно вводит возможность прокрутки на мобильном устройстве.
Если вы знаете свой видовой экран ( мой плагин для добавления видового экрана в ), вы можете просто добавьте css toggle для
position
.
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
Я также добавлю это, чтобы не допустить, чтобы базовая страница прыгала влево / вправо при показе / скрытии модалов.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}