[英]How to get rid of unnecessary scrollbars
我有两个div,一个在另一个内。
两者都明确设置为相同的高度。
但是,外部div具有最大宽度/高度约束和自动溢出。
这可以按我的需要工作,并且在调整div的大小并且内部内容的暗淡超过外部div时,滚动条会打开。
问题在于,从那时起,减小两个div的大小不会关闭滚动条。
实际上,一个滚动条使另一个滚动条保持打开状态。
到目前为止,唯一的解决方法是暂时将内部div的大小减小到比外部div小20px,然后将其重置为匹配的尺寸。
有谁知道一种解决方案,当内部和外部div大小相同时,该滚动条将停止滚动条“打开”?
TIA罗布
demo here
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'; }
演示小提琴: 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>
将您的CSS更改为:
#outer{
max-width:200px;
max-height:200px;
background-color:red;
overflow:hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.