Chrome滚动条在内容小于容器时不会消失

我有一个应用程序会执行大量的调整大小元素以确保它们适合容器。有时候内容会溢出，有时它们完全适合，所以我在容器上使用了overflow：auto。Chrome滚动条在内容小于容器时不会消失

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

一个简单的解决方法，对于简单的应用程序来说很好，就是设置overflow：hidden，然后在重排之后，再次设置overflow：auto。然而，在这个应用程序中，容器不会（也不应该）知道它的内容是否会扩展到适合或不适合，甚至当它完成加载时（因此它知道何时更改溢出）。这与此处提到的类似：http://www.google.ad/support/forum/p/Chrome/thread?tid=3df53193ac1cf08b&hl=en，但我认为这对我们的情况并不可行

有什么方法可以使滚动条在内容适合时消失？我附上了HTML来查看问题。点击绿色使其更大，然后再次使其变小。滚动条消失在IE和Firefox，但不是铬（一旦你点击“修复滚动条”，它的工作原理）

<!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>

来源

2010-12-09 XwipeoutX

有趣的问题......

作为一种解决办法：既然你改变的内容，当你这样做的时候，你可以将它的大小设置为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';

来源

2010-12-09 03:04:41 void

似乎要做的伎俩。我选择隐藏它，回流，显示它。不幸的是，我必须为我的容器中的所有类型的内容做到这一点 - 这并不理想。我会留下一些问题，看看有没有其他的解决方案，否则你已经掌握了。 – XwipeoutX 2010-12-09 04:15:30

，如果你与一个iframe的工作...

没有工作你身边，你应该能够手动设置滚动条不能在HTML代码显示。如果您想要更大的灵活性 - 只需动态创建iframe调用并相应地更改其html。我测试了谷歌浏览器18.0，它似乎工作正常。

使用div时，我想象一个类似的javascript块，只要你操作它的样式，并确保在代码中 - 你定义了内联样式，以便让javascript有一个属性来操作。我发现这种方法适用于所有现代浏览器的跨浏览器。

来源

2012-04-13 00:10:18 Randy

Chrome滚动条在内容小于容器时不会消失

回答

相关问题