Question

我有一个应用程序可以执行大量调整大小元素以确保它们适合容器。有时内容是溢出的，有时它们非常合适，所以我在容器上使用overflow：auto。

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

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

当内容适合时，是否有另一种方法可以让滚动条消失？我已附加HTML以查看问题。单击绿色使其变大，然后再次将其缩小。滚动条在IE和Firefox中消失，但不是chrome（一旦点击“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>

Answer 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';

Answer 2

如果你正在使用iframe ......

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

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

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

2 个答案: