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/

演示代码段

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

将CSS更改为：

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

}

如何摆脱不必要的滚动条

2 个答案: