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滾動條在內容小於容器時不會消失

回答

相關問題