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

发布于 2024-10-06 22:10:27 字数 2024 浏览 4 评论 0原文

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

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

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼趣 2024-10-13 22:10:27

有趣的问题...

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

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

回复收藏 0 原文