当内容小于容器时，Chrome 滚动条不会消失答案

【问题标题】：Chrome scrollbars not disappearing when content is smaller than container当内容小于容器时，Chrome 滚动条不会消失
【发布时间】：2011-05-22 14:46:33
【问题描述】：

我有一个应用程序可以调整元素的大小以确保它们适合容器。有时内容会溢出，有时它们完美契合，所以我在容器上使用了 overflow:auto。

问题出在 chrome 中，当容器大小缩小时，容器会出现滚动条，即使获取了适当大小的新图像，也不需要滚动条。

对于简单的应用程序来说，一个简单的解决方法是设置overflow:hidden，然后在回流后再次设置overflow:auto。但是，在这个应用程序中，容器不（实际上不应该）知道它的内容是否会缩放以适应或不适合，甚至何时完成加载（因此它知道何时更改溢出） .这类似于这里提到的：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>

【问题讨论】：

标签： css google-chrome overflow scrollbars

【解决方案1】：

有趣的问题...

作为一种解决方法：既然您要更改内容，那么当您更改内容时，是否可以将其大小设置为 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';

【讨论】：

似乎可以解决问题。我选择隐藏它，重排，显示它。不幸的是，我必须对容器中所有类型的内容都这样做——这不太理想。我会把这个问题留一会儿，看看有没有其他的解决方案，否则你就知道了。
谢谢。这是一个非常奇怪的行为，我想不出任何其他的工作方法（除了谷歌修复它）。奇怪的是，我记得 IE 中有一个非常相似的错误，你尝试了哪些版本？
我们只针对 IE 8，没有问题。
您还没有找到其他修复方法吗？我有同样的问题：大小合适但仍然显示滚动条，除非溢出设置为隐藏然后返回自动。

【解决方案2】：

如果您正在使用 iframe...

如果没有解决方法，您应该能够手动设置滚动条不在 html 代码中显示。如果您想要更大的灵活性 - 只需动态创建 iframe 调用并相应地更改其 html。我用 google chrome 18.0 对此进行了测试，它似乎工作正常。

对于 div，我想只要您操作其样式，我想类似的 javascript 块就可以工作，并确保在代码中 - 您定义内联样式，以允许 javascript 具有可操作的属性。我发现这种方法适用于所有现代浏览器的跨浏览器。

【讨论】：