Переключение отображения div'ов приводит к переполнению: scroll - PullRequest
Новая
       24

Переключение отображения div'ов приводит к переполнению: scroll

0 голосов
/ 03 июля 2019

У меня есть модальный режим: 


<div class="modal" style="display: block">
    <div class='modal-background'></div>
    <div id='modalContent' class="modal-content" style="max-width:90%;max-height:100%;overflow: scroll;">
        <div onclick='toggleDiv(true)' id="details">
           <h1>Title 1</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta quis orci vitae tristique. Proin sit amet fermentum purus, et placerat lacus. Proin efficitur ut metus sit amet tempor. Pellentesque sodales ligula metus, nec volutpat tellus consequat a. Nunc elementum justo eros, ut rutrum leo semper at.</p>
        </div>
        <div style="display: none;" id="update">
           <h1 onclick='toggleDiv(false)'>Title 2</h1>
           <p> Vivamus sit amet ipsum dui. Vestibulum tempus, dui sollicitudin gravida fringilla, lorem velit aliquet nisi, a tempor leo ligula in dolor. Nullam at purus tincidunt, ultrices velit nec, hendrerit nunc. Phasellus molestie ligula eget rhoncus pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec posuere molestie ullamcorper. Nullam ornare sed justo sed maximus. Proin at eros eget eros vestibulum accumsan.</p>
        </div>
    </div>
</div>
<script>
function toggleDiv(on){
    if(on){
        document.getElementById('update').style.display = 'block';
        document.getElementById('details').style.display = 'none';

    } else{
        document.getElementById('details').style.display = 'block';
        document.getElementById('update').style.display = 'none';
    }

}
</script>

При первой загрузке в IE все выглядит хорошо.Но когда я пытаюсь переключаться между двумя внутренними элементами div .details и .update (переключаясь между display:block и display:none), модальное состояние становится недоступным для прокрутки.

Есть идеи о том, что вызывает это?Я пробовал использовать несколько разных дисплеев, кроме блока, но они, похоже, имели ту же проблему.

* отлично работает в других браузерах

1 Ответ

0 голосов
/ 08 июля 2019

Я придумал какой-то хакерский (на мой взгляд) способ решить эту проблему.Обычно, когда я переключаю div, я устанавливаю переполнение на auto перед тем, как скрывать и отображать, а затем снова переключаю его на прокрутку.Это как-то решает проблему скрытия / отображения, устраняющего переполнение. 

function toggleDiv(on){
    if(on){
        document.getElementById('modalContent').style.overflow = 'auto';
        document.getElementById('update').style.display = 'block';
        document.getElementById('details').style.display = 'none';
        document.getElementById('modalContent').style.overflow = 'scroll';

    } else{
        document.getElementById('modalContent').style.overflow = 'auto';
        document.getElementById('details').style.display = 'block';
        document.getElementById('update').style.display = 'none';
        document.getElementById('modalContent').style.overflow = 'scroll';
    }

}
...