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

Supponiamo di avere un certo stile e il markup:

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

<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

Quando lo vedi. L' <ul>ha una barra di scorrimento in basso, anche se ho specificato i valori visibili e nascosti per troppo pieno x / y.

(osservato su Chrome 11 e opera (?))

Immagino che ci debbano essere alcune specifiche del W3C o qualcosa che dice che ciò accada, ma per la mia vita non riesco a capire perché.

JSFiddle

AGGIORNAMENTO: - Ho trovato un modo per ottenere lo stesso risultato aggiungendo un altro elemento racchiuso in ul. Controlla.

Dopo alcune ricerche serie sembra di aver trovato la risposta alla mia domanda:

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

In Gecko, Safari, Opera, 'visibile' diventa 'auto' anche quando combinato con 'nascosto' (in altre parole: 'visibile' diventa 'auto' quando combinato con qualsiasi altra cosa diversa da 'visibile'). Gecko 1.8, Safari 3, Opera 9.5 sono piuttosto coerenti tra loro.

anche le specifiche del W3C dicono:

I valori calcolati di 'overflow-x' e 'overflow-y' sono gli stessi dei loro valori specificati, tranne per il fatto che alcune combinazioni con 'visibile' non sono possibili: se uno è specificato come 'visibile' e l'altro è 'scroll' o "auto", quindi "visibile" è 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 visibleper o overflow-xo overflow-yqualcosa di diverso visibledall'altro, il visiblevalore viene interpretato come auto.

un altro trucco economico, che sembra fare il trucco:

style="padding-bottom: 250px; margin-bottom: -250px;"sull'elemento in cui viene tagliato l'overflow verticale, con la 250rappresentazione di tutti i pixel necessari per il menu a discesa, ecc.

Inizialmente ho trovato un modo CSS per aggirare questo quando ho usato il plug-in Cycle jQuery. Cycle utilizza JavaScript per impostare la mia diapositiva su overflow: hidden, quindi quando si impostano le mie foto width: 100%sulle immagini sembrerebbe tagliate verticalmente, e quindi le ho costrette a essere visibili con !importante per evitare di mostrare l'animazione della diapositiva fuori dalla scatola ho impostato overflow: hiddenil div contenitore del diapositiva. Spero che funzioni per te.

AGGIORNAMENTO - Nuova soluzione:

Problema originale -> http://jsfiddle.net/xMddf/1/ (Anche se lo uso overflow-y: visiblediventa "auto" e in realtà "scorre".)

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

La nuova soluzione -> http://jsfiddle.net/xMddf/2/ (ho trovato una soluzione alternativa usando un div wrapper per applicare overflow-xe overflow-ya diversi elementi DOM come James Khoury ha consigliato sul problema della combinazione visiblee hiddendi un singolo elemento DOM.)

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

Ho riscontrato questo problema quando provavo a creare una barra laterale posizionata fissa con contenuti scorrevoli verticalmente e figli posizionati assoluti nidificati da visualizzare al di fuori dei limiti della barra laterale .

Il mio approccio consisteva nell'applicare separatamente:

• una overflow: visibleproprietà per l'elemento della barra laterale
• una overflow-y: autoproprietà al wrapper interno della barra laterale

Si prega di controllare l'esempio seguente o un codice in linea .

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

<p>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?</p>
<div class="sidebar">
  <div class="sidebarWrapper">
    <div class="element">
      I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
    </div>
    <p>This is a 200px width container with optional vertical scroll.</p>
    <p>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?</p>
  </div>
</div>

Ho usato l' content+wrapperapproccio ... ma ho fatto qualcosa di diverso rispetto a quanto menzionato finora: mi sono assicurato che i confini del mio wrapper NON si allineassero ai confini del contenuto nella direzione in cui volevo essere visibile .

Nota importante: E 'stato abbastanza facile ottenere content+wrapper, same-boundsl'approccio al lavoro su un browser o l'altro a seconda di varie combinazioni di css position, overflow-*ecc ... ma non ho mai potuto usare questo approccio per farli tutti corretti (Bordo, Chrome, Safari,. ..).

Ma quando ho avuto qualcosa di simile:

  <div id="hack_wrapper" // created solely for this purpose
       style="position:absolute; width:100%; height:100%; overflow-x:hidden;">
      <div id="content_wrapper"
           style="position:absolute; width:100%; height:15%; overflow:visible;">         
          ... content with too-much horizontal content ... 
      </div>
  </div>

... tutti i browser erano felici.

Esiste ora un nuovo modo di affrontare questo problema : se rimuovi la posizione: relativo dal contenitore che deve avere l'overflow-y visibile, puoi avere l'overflow-y visibile e l'overflow-x nascosto, e viceversa (hanno l'overflow- x visible e overflow-y hidden, assicurati solo che il contenitore con la proprietà visible non sia posizionato relativamente).

Vedi questo post dai CSS Tricks per maggiori dettagli - ha funzionato per me: https://css-tricks.com/popping-hidden-overflow/