5

コンテナ内に収まるように多くのサイズ変更要素を実行するアプリケーションがあります。内容がオーバーフローすることを意図している場合もあれば、完全に収まる場合もあるので、コンテナーでoverflow：autoを使用します。

問題はクロムにあります。コンテナのサイズを縮小すると、コンテナのスクロールバーが表示されます。新しい適切なサイズの画像を取得した場合でも、スクロールバーを必要としない適切なサイズです。

簡単な回避策は、単純なアプリケーションでは問題ありませんが、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>
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を変更します。私はこれをグーグルクローム18.0でテストしました、そしてそれはうまくいくようです。

divを使用すると、スタイルを操作する限り、同様のjavascriptのチャンクが機能することを想像します。また、javascriptに操作するプロパティを持たせるために、コードでスタイルをインラインで定義するようにします。私は、このアプローチがすべての最新のブラウザーでクロスブラウザーで機能することを発見しました。

于 2012-04-13T00:10:18.560 に答える