CSS overflow-x: visible; e overflow-y: nascosto; causando problemi con la barra di scorrimento

Supponi di avere uno stile e il margine:

ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it would work in the snippet */ width: 100px; } li { display: inline-block; } 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

Quando lo vedi. Il

    ha una barra di scorrimento in basso anche se ho specificato i valori visibili e nascosti per l’overflow x / y.

    (osservato su Chrome 11 e opera (?))

    Immagino che debbano esserci alcune specifiche w3c o qualcosa che dice che succederà, ma per la vita di me non riesco a capire perché.

    JSFiddle

    AGGIORNAMENTO: – Ho trovato un modo per ottenere lo stesso risultato aggiungendo un altro elemento avvolto attorno ul . Controlla.

    Dopo alcune ricerche serie sembra che abbia trovato la risposta alla mia domanda:

    da: http://www.brunildo.org/test/Overflowxy2.html

    In Gecko, Safari, Opera, ‘visible’ diventa ‘auto’ anche se combinato con ‘hidden’ (in altre parole: ‘visible’ diventa ‘auto’ quando combinato con qualsiasi cosa diversa da ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 sono abbastanza coerenti tra loro.

    anche le specifiche del W3C dicono:

    I valori calcolati di ‘overflow-x’ e ‘overflow-y’ sono uguali ai loro valori specificati, tranne che alcune combinazioni con ‘visible’ non sono possibili: se uno è specificato come ‘visible’ e l’altro è ‘scroll’ o ‘auto’, quindi ‘visible’ è impostato su ‘auto’. Il valore calcolato di ‘overflow’ è uguale al valore calcolato di ‘overflow-x’ se ‘overflow-y’ è lo stesso; altrimenti è la coppia di valori calcolati di ‘overflow-x’ e ‘overflow-y’.

    Versione breve:

    Se si utilizza visible per overflow-x o overflow-y e qualcosa di diverso da visible per l’altro, il valore visible viene interpretato come auto .

    Originariamente ho trovato un modo CSS per aggirare questo problema quando si utilizza il plugin Cycle jQuery. Cycle utilizza JavaScript per impostare la mia diapositiva in overflow: hidden , quindi quando si impostano le mie immagini in width: 100% le immagini sembrerebbero tagliate verticalmente, e così le ho forzate a essere visibili con !important e per evitare di mostrare l’animazione della diapositiva fuori dal box I set overflow: hidden al contenitore div della slide. Spero che funzioni per te.

    AGGIORNAMENTO – Nuova soluzione:

    Problema originale -> http://jsfiddle.net/xMddf/1/ (Anche se uso overflow-y: visible diventa “auto” e in realtà “scroll”.)

     #content { height: 100px; width: 200px; overflow-x: hidden; overflow-y: visible; } 

    La nuova soluzione -> http://jsfiddle.net/xMddf/2/ (Ho trovato una soluzione alternativa utilizzando un div wrapper per applicare overflow-x e overflow-y a diversi elementi DOM come James Khoury ha consigliato sul problema della combinazione di visible e hidden a un singolo elemento DOM.)

     #wrapper { height: 100px; overflow-y: visible; } #content { width: 200px; overflow-x: hidden; } 

    un altro hack a buon mercato, che sembra fare il trucco:

    style="padding-bottom: 250px; margin-bottom: -250px;" sull’elemento in cui l’overflow verticale viene tagliato, con 250 rappresenta il numero di pixel necessario per il menu a discesa, ecc.

    Ho riscontrato questo problema durante il tentativo di creare una barra laterale posizionata fissa con entrambi i contenuti scorrevoli verticalmente e i bambini nidificati posizionati in posizione assoluta da visualizzare all’esterno dei limiti della barra laterale .

    Il mio approccio consisteva di applicare separatamente:

    • un overflow: visible proprietà overflow: visible all’elemento della barra laterale
    • un overflow-y: auto proprietà overflow-y: auto al wrapper interno della barra laterale

    Si prega di controllare l’esempio di seguito o una codepen online .

     html { min-height: 100%; } body { min-height: 100%; background: linear-gradient(to bottom, white, DarkGray 80%); margin: 0; padding: 0; } .sidebar { position: fixed; top: 0; right: 0; height: 100%; width: 200px; overflow: visible; /* Just apply overflow-x */ background-color: DarkOrange; } .sidebarWrapper { padding: 10px; overflow-y: auto; /* Just apply overflow-y */ height: 100%; width: 100%; } .element { position: absolute; top: 0; right: 100%; background-color: CornflowerBlue; padding: 10px; width: 200px; } 
     

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    Ho usato l’approccio content+wrapperma ho fatto qualcosa di diverso da quanto detto finora: mi sono assicurato che i confini del mio wrapper NON si allineassero con i limiti del contenuto nella direzione che volevo fosse visibile .

    Nota importante: è stato abbastanza facile ottenere il content+wrapper, same-bounds approccio content+wrapper, same-bounds per lavorare su un browser o l’altro a seconda delle varie combinazioni di css di position , overflow-* , ecc … ma non ho mai potuto usare quell’approccio per ottenere tutti loro sono corretti (Edge, Chrome, Safari, …).

    Ma quando ho avuto qualcosa come:

      
    ... content with too-much horizontal content ...

    … tutti i browser erano felici.