2016-01-21 24 views
7

Il limite massimo per l'altezza ottenuto per il rendering della barra di scorrimento del browser ha vari valori in tutti i browser. Se aumenti di 1 pixel dall'altezza limitata, lo scorrimento del browser non verrà visualizzato nella pagina.Limiti di altezza per la barra di scorrimento verticale del browser

FF: 17895697px

IE: 10737418px

In Chrome non c'è nessun problema di rendere la barra di scorrimento, ma hanno sempre 33554400px altezza nel layout.

enter image description here

C'è una reference di altezza massima dei pixel per un elemento basato sul browser, ma non v'è alcun riferimento per la limitazione della barra del browser di scorrimento.

Esiste comunque una soluzione per superare questo problema di altezza? Ad esempio, la barra di scorrimento deve essere visualizzata quando viene superata l'altezza limitata.

+4

Questo è interessante ma non sono sicuro di quale sia la domanda. – BSMP

+0

@BSMP: ho dimenticato di aggiungere la domanda. Ora ho aggiunto la domanda. –

+0

Per quello che vale, se aggiungo altri 10 9 all'esempio di Chrome, la barra di scorrimento scompare. – BSMP

risposta

2

Tecnicamente questo è possibile purché ogni elemento non superi l'altezza massima. Ma per scopi pratici non è possibile perché il comportamento del browser diventa strano una volta che l'altezza complessiva del corpo supera il limite.

Questo sembra effettivamente funzionare bene in IE11:

div{ 
 
    background: red; 
 
    color: white; 
 
    height: 10737418px; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    color: white; 
 
}
<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test 
 
</div> 
 
<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test 
 
</div>

Tutte e quattro le div s presentano con il CSS applicata. È possibile cercare la parola "test" e scorrerà fino alla parola tutte e quattro le volte.

In Firefox, l'altezza scorrevole sarà più grande della dimensione massima ma si fermerà rendendo nulla di sotto di essa:

div{ 
 
    border: 3px solid purple; 
 
    height: 17895697px; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
    color: white; 
 
} 
 

 
.red { 
 
    background: red; 
 
    color: white; 
 
}
<div> 
 
    Test 
 
</div> 
 
<div class="blue"> 
 
    Test2 
 
</div> 
 
<div class="red"> 
 
    Test3 
 
</div>

La prima scatola ha un bordo 3px viola. Firefox non renderà nemmeno il bordo inferiore e gli altri 2 div s non sono affatto visibili. Il browser può dire che la parola "test" è nella pagina 3 volte ma usando 'Trova' non si fa scorrere la pagina verso gli altri div s. Si siede proprio lì.

In Chrome, le cose diventano strane:

div{ 
 
    border: 3px solid #000000; 
 
    background: #CCCCCC; 
 
    height: 99999999999999999999999999999999999999px; 
 
}
<div> 
 
    Test 
 
</div> 
 
<div> 
 
    Test2 
 
</div> 
 
<div> 
 
    Test3 
 
</div>

Il primo div non ottiene un bordo a tutti e poi per qualche motivo il confine div ripete più e più volte dopo il primo div anche se ci sono solo altri due div s nella pagina. Il "Trova" di Chrome riconosce che la parola "Test" è solo 3 volte nella pagina, ma ritiene che i secondi due siano nella parte inferiore della pagina. La parola "Test" non è visibile la 2a o 3a volta.

Si ottiene un comportamento strano se si inseriscono elementi alti in un contenitore con altezza fissa e un set di overflow per lo scorrimento.

L'unico modo che posso vedere per aggirare questo è assicurarsi che l'altezza della pagina non superi mai il limite.

Se si tratta di contenuto statico, basta scomporlo su più pagine.

Se si tratta di contenuti dinamici, è possibile:

  • impostare un limite arbitrario di quanto contenuto viene inserito nella pagina prima di generare un link per altre pagine

  • Mettere un limite su quanto il contenuto è visibile in una volta

    • EX: una pagina di domande frequenti con un layout di fisarmonica, quindi è necessario fare clic sulla domanda per la risposta da visualizzare e solo una risposta è visibile in un momento in
  • posto un limite al numero di record/risultati vengono restituiti

  • Nascondi/compressione/passato rimuovere i contenuti che l'utente ha fatto scorrere (non ho provato questo, ma se si può fare Non vedo perché non funzionerebbe.)

+2

La divisione di più elementi in base all'altezza limitata è una buona idea e ha funzionato perfettamente. Grazie. –