Ich habe eine Anwendung, die viele Größenänderungselemente verwendet, um sicherzustellen, dass sie in einen Container passen. Manchmal ist der Inhalt überlaufen, und manchmal passen sie perfekt, also verwende ich Überlauf: auto auf dem Container.Chrome Bildlaufleisten verschwinden nicht, wenn der Inhalt kleiner ist als der Container
Das Problem ist in Chrome, wenn die Containergröße geschrumpft ist, erscheinen Bildlaufleisten für den Container, selbst wenn ein neues Bild mit der passenden Größe abgerufen wird, ist es die richtige Größe, keine Bildlaufleisten zu benötigen.
Eine einfache Problemumgehung, die für eine einfache Anwendung in Ordnung wäre, ist das Setzen von overflow: hidden und dann nach einem Reflow set overflow: auto erneut. In dieser App weiß der Container jedoch nicht (und sollte wirklich nicht wissen), ob der Inhalt skaliert werden soll oder nicht oder ob er bereits geladen wurde (er weiß also, wann er den Überlauf ändern soll). . Dies ist ähnlich wie hier erwähnt: http://www.google.ad/support/forum/p/Chrome/thread?tid=3df53193ac1cf08b&hl=en, aber ich denke nicht, dass es für unsere Situation machbar ist
Gibt es eine andere Möglichkeit, die Scrollbars verschwinden zu lassen, wenn der Inhalt passt? Ich habe den HTML-Code angehängt, um das Problem zu sehen. Klicken Sie auf das Grün, um es größer zu machen, und dann wieder, um es wieder kleiner zu machen. Die Bildlaufleisten verschwinden in IE und Firefox, aber nicht Chrom (das funktioniert, wenn Sie „Fix Scroll-Leisten“ klicken)
<!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>
Scheint, den Trick zu tun. Ich entschied mich dafür, es zu verbergen, umzufliessen, es zu zeigen. Leider muss ich es für alle Arten von Inhalten in meinem Container tun - was nicht ideal ist. Ich werde die Frage für ein bisschen offen lassen, um zu sehen, ob es andere Lösungen gibt, sonst hast du es. – XwipeoutX
Danke. Es ist ein wirklich seltsames Verhalten, ich kann mir keinen anderen Arbeitsansatz vorstellen (abgesehen von Google, das es repariert). Seltsamerweise erinnere ich mich an einen wirklich ähnlichen Bug im IE, welche Versionen haben Sie versucht? – void
Wir zielen nur auf IE 8, und dort gibt es kein Problem. – XwipeoutX