У меня есть приложение, которое выполняет множество элементов для изменения размера, чтобы убедиться, что они помещаются внутри контейнера.Иногда содержимое предназначено для переполнения, а иногда они идеально подходят, поэтому я использую overflow: auto для контейнера.
Проблема в chrome, когда размер контейнера сокращается, для контейнера появляются полосы прокрутки, дажеесли при получении нового изображения соответствующего размера это правильный размер, для которого не требуются полосы прокрутки.
Простой обходной путь, который подойдет для простого приложения, - установить переполнение: скрытое, а затем, послеreflow, установите переполнение: снова автоматически.Тем не менее, в этом приложении контейнер не (и действительно, не должен) знать, будет ли его содержимое масштабироваться по размеру или нет, или даже когда он завершит загрузку (поэтому он знает, когда изменить переполнение),Это похоже на то, что было упомянуто здесь: 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>