我有两个 div,一个在另一个里面。
两者都明确设置为相同的高度。
然而,外部 div 具有最大宽度/高度限制和自动溢出。
这是我想要的,当 div 调整大小时,滚动条会出现,内部内容变暗超过外部 div。
问题是从那时起减小两个 div 的大小将不会关闭滚动条。
实际上,一个滚动条使另一个滚动条保持打开状态。
目前唯一的解决方法是暂时将内部 div 的大小减小到比外部 div 小 20px,然后将其重置回匹配的尺寸。
有谁知道当内部和外部 div 大小相同时阻止滚动条保持“开启”状态的解决方案?
TIA 罗布
此处演示
JSFiddle
最佳答案
当通过脚本更改内容并且浏览器不更新滚动条位置时,这似乎是一个问题。
这里的技巧是在您的操作完成后再次将 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'; }
演示 fiddle :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>
关于javascript - 如何摆脱不必要的滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33300925/