Chrome scrollbars not disappearing when content is smaller than container
I have an application that does a lot of resizing elements to ensure they fit inside a container. Sometimes the contents are meant to overflow, and sometimes they fit perfectly, so I use overflow:auto on the container.
The problem is in chrome, when the container size is shrunk, scrollbars appear for the container, even if when a new appropriately sized image is fetched, it is the right size to not require scrollbars.
An easy workaround, which would be fine for a simple application, is to set overflow:hidden and then, after a reflow, set overflow:auto again. However, in this app, the container doesn't (and really, shouldn't) know whether or not its conte开发者_运维问答nt is going to scale to fit or not, or even when its finished loading (so it knows when to change the overflow). This is similar to what was mentioned here: http://www.google.ad/support/forum/p/Chrome/thread?tid=3df53193ac1cf08b&hl=en, but I don't think it's feasible for our circumstance
Is there another way I can make the scrollbars disappear when the content fits? I've attached the HTML to see the problem. Click the green to make it bigger, then again to make it smaller again. The scrollbars disappear in IE and firefox, but not chrome (which works once you click "Fix Scrollbars")
<!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>
Interesting problem...
As a workaround: Since you're changing the content, when you do it, can you set its size to, say, 1x1, force the re-flow, and then change it back (or removing them)? E.g., given your sample code:
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';
if you are working with an iframe...
without a work around, you should be able to manually set a scrollbar not to display in the html code. If you want greater flexibility - just dynamically create the iframe call and change its html accordingly. I tested this with google chrome 18.0 and it seems to work fine.
With a div, I imagine a similar chunk of javascript will work as long as you manipulate its styles, and ensure that in the code - you define the styles inline, in order to allow the javascript to have a property to manipulate. I have found this approach works cross browser for all modern browsers.
加载中,请稍侯......
精彩评论