barre di scorrimento Chrome non scomparendo quando il contenuto è più piccolo contenitore

StackOverflow https://stackoverflow.com/questions/4394350

Domanda

Ho un'applicazione che fa un sacco di elementi di ridimensionamento per assicurarsi si inseriscono all'interno di un contenitore. A volte i contenuti sono destinati a troppo pieno, e, talvolta, si inseriscono perfettamente, per cui uso overflow:. Automatica sul contenitore

Il problema è in cromo, quando la dimensione del contenitore è ristretto, barre di scorrimento appaiono per il contenitore, anche se quando una nuova immagine di dimensioni appropriate è recuperata, è la dimensione giusta per non richiedere barre di scorrimento.

Una soluzione semplice, che sarebbe bene per una semplice applicazione, è di troppo pieno: nascosti e poi, dopo un riflusso, insieme overflow: auto di nuovo. Tuttavia, in questa applicazione, il contenitore non lo fa (e in realtà, non dovrebbe) sapere se il suo contenuto è andare a scala per adattarsi o no, o anche quando il suo carico finito (quindi sa quando cambiare l'overflow) . Questo è simile a quello che è stato detto qui: http: // www.google.ad/support/forum/p/Chrome/thread?tid=3df53193ac1cf08b&hl=en , ma io non credo che sia fattibile per il nostro circostanza

C'è un altro modo per rendere le barre di scorrimento scompaiono quando le crisi di contenuti? Ho allegato il codice HTML per vedere il problema. Fare clic sul verde per renderlo più grande, poi di nuovo per renderlo più piccolo di nuovo. Le barre di scorrimento scompaiono in IE e Firefox, ma non al cromo (che funziona una volta si fa clic su "Fix Barre di scorrimento") 

<!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>
È stato utile?

Soluzione

problema Interessante ...

Per risolvere il problema: Dal momento che si sta modificando il contenuto, quando lo si fa, si può impostare la sua dimensione, per dire, 1x1, forzare la ri-flusso, e poi cambiare di nuovo (o la rimozione di loro)? Per esempio, dato il vostro codice di esempio: 

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

Altri suggerimenti

se si sta lavorando con un iframe ...

senza un lavoro in giro, si dovrebbe essere in grado di impostare manualmente una barra di scorrimento non mostra nel codice html. Se si desidera una maggiore flessibilità - basta creare dinamicamente la chiamata iframe e cambiare il suo codice HTML di conseguenza. Ho provato questo con Google Chrome 18.0 e sembra funzionare bene.

Con un div, immagino un simile pezzo di javascript funzionerà fino a quando si manipolare i suoi stili, e assicurarsi che il codice - si definiscono gli stili inline, al fine di consentire il javascript per avere una proprietà da manipolare. Ho trovato questo approccio funziona cross browser per tutti i browser moderni.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top