5

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

问题出在 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>
4

2 回答 2

2

有趣的问题...

作为一种解决方法：由于您正在更改内容，当您这样做时，您可以将其大小设置为 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-09T03:04:41.960 回答
0

如果您正在使用 iframe...

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

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

于 2012-04-13T00:10:18.560 回答