Xwi*_*utX 5 css google-chrome scrollbars overflow
我有一个应用程序，它执行大量调整元素的大小以确保它们适合容器。有时内容会溢出，有时它们非常适合，所以我在容器上使用 overflow:auto 。
问题是在 chrome 中，当容器大小缩小时，容器会出现滚动条，即使获取了新的适当大小的图像，它也是不需要滚动条的正确大小。
对于简单的应用程序来说，一个简单的解决方法是设置溢出：隐藏，然后在回流后，再次设置溢出：自动。然而，在这个应用程序中，容器并不（实际上也不应该）知道它的内容是否会缩放以适应或不适合，甚至在它完成加载时（因此它知道何时更改溢出） . 这类似于这里提到的内容：http : //www.google.ad/support/forum/p/Chrome/thread?tid= 3df53193ac1cf08b& hl=en，但我认为这对我们的情况不可行
当内容适合时，还有另一种方法可以使滚动条消失吗？我已附上 HTML 以查看问题。单击绿色使其变大，然后再次单击使其变小。滚动条在 IE 和 firefox 中消失，但在 chrome 中不消失（单击“修复滚动条”后即可使用）
<!DOCTYPE html>
<html>
<head>
<title>Scrollbar Woes</title>
<script type="text/javascript">
function toggle() {
var img = document.getElementById('content');
var span = document.getElementById('size');
var newSize = 820 - parseInt(span.innerHTML)
img.style.width = newSize + 'px';
img.style.height = newSize + 'px';
span.innerHTML = newSize;
};
function fixSize() {
var img = document.getElementById('scroll');
img.style.overflow = 'hidden';
img.scrollWidth; // Calculate width to force a reflow
img.style.overflow = 'auto';
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
#scroll {
width: 400px;
height: 400px;
overflow: auto;
}
#content {
width: 390px;
height: 390px;
background: green;
}
</style>
</head>
<body>
<div id="scroll">
<div id="content" onclick="toggle()">Click to change size</div>
</div>
<hr />
Size = <span id="size">390</span>
<br />
<a href="javascript:void(0)" onclick="fixSize();">Fix Scrollbars</a>
</body>
</html>
有趣的问题...
解决方法：既然您要更改内容，那么当您执行此操作时，是否可以将其大小设置为 1x1，强制重新流动，然后将其更改回来（或删除它们）？例如，给定您的示例代码：
img.style.width = '1px';
img.style.height = '1px';
img.scrollWidth; // Calculate width to force a reflow
img.style.width = newSize + 'px';
img.style.height = newSize + 'px';
| 归档时间： |
|
| 查看次数： |
2977 次 |
| 最近记录： |