Фиксированный оверлей позволяет прокручивать тело. Настройка переполнения скрыта для переходов тела вверх

В моем веб-проекте у меня есть набор блоков, представляющих миниатюры проектов. Когда я нажимаю на миниатюру, появляется подробный вид. Этот вид является div над полной страницей и имеет фиксированную позицию, z-индекс больше, чем что-либо еще. Я могу прокручивать детали (это, конечно, то, что я хочу), но также иногда прокручивает тело. Я проверил несколько решений, которые я нашел, но никто из них не помог мне полностью. если я закрываю тело переполнением, он предотвращает прокрутку, но, с другой стороны, просматривает переходы вверх. Другое решение: установка тела в фиксированное положение и верхнее свойство в противоположность window.offsetY, а затем при закрытии параметра настройки window.scrollTo (offsetY) это решение также не работало (деталь сверху и я не могу прокрутить).Фиксированный оверлей позволяет прокручивать тело. Настройка переполнения скрыта для переходов тела вверх

Вопрос в том, как я могу предотвратить прокрутку тела в фиксированном элементе наложения?

источник

2015-09-19 Vít Horáček

если вы открытый вид детали, вы должны добавить в класс тела

.modal-open { 
    overflow: hidden; 
}

и детальный вид модального должен иметь класс

.modal { 
    display: block; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1050; 
    overflow: hidden; 
    -webkit-overflow-scrolling: touch; 
    outline: 0; 
} 
.modal-open .modal { 
    overflow-x: hidden; 
    overflow-y: auto; 
} 
.modal-dialog { 
    width: 600px; 
    margin: 30px auto; 
}

HTML структура

<body class="modal-open"> 
    ... 
    <div class="modal"> 
     <div class="modal-dialog"></div> 
    </div> 
</body>

источник

2015-09-19 17:58:37 sglazkov

Ну, спасибо за но это перескакивает сверху вниз:/ –

вы можете сделать пример? мой вариант успешно работает в bootstrap http://getbootstrap.com/javascript/#modals Может быть у вас есть href = "#" без e.preventDefault()? – sglazkov

Хорошо, вот пример: http://mountiny.com/lab/blazek/ проблема в том, что настройка переполнения тела скрывается, всегда перескакивает на верх. Извините за беспорядочный код –

Фиксированный оверлей позволяет прокручивать тело. Настройка переполнения скрыта для переходов тела вверх

ответ

Смежные вопросы