如何擺脫不必要的滾動條

Question

我有兩個div，一個在另一個內。

兩者都明確設置為相同的高度。

但是，外部div具有最大寬度/高度約束和自動溢出。

這可以按我的需要工作，並且在調整div的大小並且內部內容的暗淡超過外部div時，滾動條會打開。

問題在於，從那時起，減小兩個div的大小不會關閉滾動條。

實際上，一個滾動條使另一個滾動條保持打開狀態。

到目前為止，唯一的解決方法是暫時將內部div的大小減小到比外部div小20px，然后將其重置為匹配的尺寸。

有誰知道一種解決方案，當內部和外部div大小相同時，該滾動條將停止滾動條“打開”？

TIA羅布

demo here JSFiddle

Answer 1

當通過腳本更改內容並且瀏覽器未更新滾動條位置時，這似乎是一個問題。

這里的技巧是通過在操作完成后將overflow更改為auto來強制進行重排，並且由於發生的速度非常快，為了使瀏覽器重新計算對滾動條的需求，您需要稍微延遲一下。

例如：

window.clickit = function (mode){
    switch(mode){
        case 1:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 2:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
        case 3:
            ...
            outer.style.overflow = 'hidden';
            setTimeout(fixScroll, 100);
            break;
    }
}
function fixScroll() { outer.style.overflow = 'auto'; }

演示小提琴： http : //jsfiddle.net/abhitalks/f9c8orf7/1/

演示片段：

 window.clickit = function (mode){ switch(mode){ case 1: outer.style.height='250px'; outer.style.width='250px'; inner.style.height='250px'; inner.style.width='250px'; outer.style.overflow = 'hidden'; setTimeout(fixScroll, 100); break; case 2: outer.style.height='100px'; outer.style.width='100px'; inner.style.height='100px'; inner.style.width='100px'; outer.style.overflow = 'hidden'; setTimeout(fixScroll, 100); break; case 3: outer.style.height='150px'; outer.style.width='150px'; inner.style.height='150px'; inner.style.width='150px'; outer.style.overflow = 'hidden'; setTimeout(fixScroll, 100); break; } } function fixScroll() { outer.style.overflow = 'auto'; } 

 #outer{ height: 150px; width: 150px; max-width:200px; max-height:200px; overflow:auto; } #inner { background-image: url('//lorempixel.com/200/200'); } 

 <div id="outer" style="height:150px;width:150px"> <div id="inner" style="height:150px;width:150px"></div> </div> <button onclick="clickit(1);">bigger</button> <button onclick="clickit(2);">smaller</button> <button onclick="clickit(3);">reset</button> 

Answer 2

將您的CSS更改為：

#outer{
max-width:200px;
max-height:200px;
background-color:red;
overflow:hidden;

}