html - 切换 div 的显示会导致溢出 :scroll

Question

我有一个模式，基本上是:

<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 之间切换)，模态变得不可滚动。

知道是什么原因造成的吗？除了 block 之外，我尝试使用几个不同的显示器，但它们似乎有同样的问题。

*在其他浏览器中工作正常

Answer 1

我想出了一种(在我看来)怪异的方法来解决这个问题。基本上当我去切换 div 时，我在隐藏和显示之前将溢出设置为自动，然后将其设置回滚动。这以某种方式解决了隐藏/显示中断溢出的问题。

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';
    }

}