CSS overflow - x: visible; oraz overflow-y: hidden; powodujące problem z paskiem przewijania

Pierwotnie znalazłem sposób CSS, aby ominąć to podczas korzystania z wtyczki jQuery cyklu. Cycle używa JavaScript, aby ustawić mój slajd na overflow: hidden, więc ustawiając moje zdjęcia na width: 100% zdjęcia wyglądałyby na wycięte pionowo, więc wymusiłem, aby były widoczne z !important i aby uniknąć pokazywania animacji slajdu po wyjęciu z pudełka ustawiłem overflow: hidden do kontenera div slajdu. Mam nadzieję, że ci się uda.

UPDATE-nowe rozwiązanie:

Oryginalny problem - > http://jsfiddle.net/xMddf/1 / (Nawet jeśli użyję overflow-y: visible staje się "auto", a właściwie "scroll".)

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

Nowe rozwiązanie -> http://jsfiddle.net/xMddf/2 / (Znalazłem obejście za pomocą wrappera div, aby zastosować overflow-x i overflow-y do różnych elementów DOM, ponieważ James Khoury doradzał problem łączenia visible i hidden do pojedynczego elementu DOM.)

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

Kolejny tani hack, który chyba działa:

style="padding-bottom: 250px; margin-bottom: -250px;" na elemencie, w którym pionowe przepełnienie jest odcięte, z 250 reprezentującą tyle pikseli, ile potrzebujesz do listy rozwijanej, itp.

Napotkałem ten problem podczas próby zbudowania ustawionego paska bocznego z zarówno pionowo przewijalną zawartością, jak i zagnieżdżonym absolutnym umieszczonym dzieci, aby były wyświetlane poza granicami paska bocznego.

Moje podejście polegało na osobnym zastosowaniu:

• właściwość overflow: visible do elementu paska bocznego
• Właściwość overflow-y: auto do sidebar inner wrapper

Proszę sprawdzić poniższy przykład lub online codepen .

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>

Zastosowałem podejście content+wrapper... ale zrobiłem coś innego niż do tej pory wspomniano: upewniłem się, że granice mojego opakowania nie zgadzają się z granicami zawartościw kierunku, w którym chciałem być widoczny .

Ważna uwaga: łatwo było uzyskać podejście content+wrapper, same-bounds do pracy na jednej lub drugiej przeglądarce w zależności od różnych kombinacji cssposition, overflow-*, itd ... ale nigdy nie mogłem użyć tego podejścia, aby uzyskać je wszystkie poprawne (Edge, Chrome, Safari, ...).

Ale kiedy miałem coś takiego:

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

... wszystkie przeglądarki były szczęśliwe.

Istnieje teraz nowy sposób rozwiązania tego problemu - Jeśli usuniesz position: relative z kontenera, który musi być widoczny overflow-y, możesz mieć overflow-y visible i overflow-x hidden i vice versa (mieć overflow-x visible i overflow-y hidden, po prostu upewnij się, że kontener z właściwością visible nie jest względnie umieszczony).

Zobacz ten post z CSS Tricks po więcej szczegółów-to działało dla mnie: https://css-tricks.com/popping-hidden-overflow/