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中看起来不错。但是，当我尝试在两个内部divs.details和.update之间切换时（通过在display:block和display:none之间切换），模态变得不可滚动。

是什么原因引起的？我尝试使用除块以外的几个不同的显示器，但是它们似乎有相同的问题。

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

Answer 1

我想出了一种解决问题的方法。基本上，当我切换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';
    }

}

切换div的显示混乱了溢出：滚动

1 个答案: