У меня есть приложение, которое делает много элементов для изменения размера, чтобы обеспечить их размещение внутри контейнера. Иногда содержимое предназначено для переполнения, и иногда они идеально подходят, поэтому я использую overflow: auto на контейнере.Хромированные полосы прокрутки не исчезают, когда содержимое меньше контейнера
Проблема заключается в хром, когда размер контейнера сокращается, полосы прокрутки отображаются для контейнера, даже если при получении нового изображения соответствующего размера это правильный размер, который не требует полос прокрутки.
Легкое обходное решение, которое было бы прекрасно для простого приложения, заключается в том, чтобы установить переполнение: скрыто, а затем, после перепланировки, снова установите переполнение: авто. Однако в этом приложении контейнер не (и действительно не должен) знать, будет ли его контент масштабироваться, чтобы соответствовать или нет, или даже когда его закончила загрузка (так что он знает, когда нужно изменить переполнение) , Это похоже на то, что было упомянуто здесь: http://www.google.ad/support/forum/p/Chrome/thread?tid=3df53193ac1cf08b&hl=en, но я не думаю, что это возможно для наших обстоятельств.
Есть ли другой способ заставить полосы прокрутки исчезнуть, когда содержимое подходит? Я прикрепил HTML, чтобы увидеть проблему. Нажмите зеленый цвет, чтобы увеличить его, затем снова, чтобы он стал меньше. В скроллбары исчезают в IE и Firefox, но не хром (который работает после нажатия на кнопку «Fix Полосы прокрутки»)
<!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>
Кажется, сделать трюк. Я решил спрятать его, оплатить, показать его. К сожалению, я должен сделать это для всех типов содержимого в моем контейнере, что является менее идеальным. Я оставлю вопрос открытым, чтобы узнать, есть ли какие-либо другие решения, иначе вы его получите. – XwipeoutX 2010-12-09 04:15:30