CSS overflow-x: terlihat; dan overflow-y: disembunyikan; menyebabkan masalah scrollbar

Misalkan Anda memiliki beberapa gaya dan 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>

Ketika Anda melihat ini. The <ul>memiliki scroll bar di bagian bawah meskipun saya sudah ditentukan nilai-nilai terlihat dan tersembunyi untuk overflow x / y.

(diamati pada Chrome 11 dan opera (?))

Saya menduga pasti ada beberapa spesifikasi w3c atau sesuatu yang mengatakan ini terjadi tetapi untuk kehidupan saya, saya tidak dapat menemukan alasannya.

JSFiddle

UPDATE: - Saya menemukan cara untuk mencapai hasil yang sama dengan menambahkan elemen lain yang melilit ul. Coba lihat.

Setelah beberapa pencarian serius sepertinya saya telah menemukan jawaban untuk pertanyaan saya:

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

Di Gecko, Safari, Opera, 'terlihat' menjadi 'otomatis' juga bila dikombinasikan dengan 'tersembunyi' (dengan kata lain: 'terlihat' menjadi 'otomatis' bila dikombinasikan dengan hal lain yang berbeda dari 'terlihat'). Gecko 1.8, Safari 3, Opera 9.5 cukup konsisten di antara mereka.

juga spesifikasi W3C mengatakan:

Nilai yang dihitung dari 'overflow-x' dan 'overflow-y' sama dengan nilai yang ditentukan, kecuali bahwa beberapa kombinasi dengan 'terlihat' tidak mungkin: jika satu ditentukan sebagai 'terlihat' dan yang lain adalah 'gulir' atau 'otomatis', maka 'terlihat' diatur ke 'otomatis'. Nilai yang dihitung dari 'overflow' sama dengan nilai yang dihitung dari 'overflow-x' jika 'overflow-y' adalah sama; kalau tidak itu adalah pasangan nilai yang dihitung dari 'overflow-x' dan 'overflow-y'.

Versi pendek:

Jika Anda menggunakan visibleuntuk salah satu dan overflow-xatau overflow-ysesuatu selain visibleuntuk yang lain, visiblenilainya diartikan sebagai auto.

peretasan murah lainnya, yang tampaknya berhasil:

style="padding-bottom: 250px; margin-bottom: -250px;" pada elemen di mana overflow vertikal mendapatkan cutoff, dengan 250 mewakili piksel sebanyak yang Anda butuhkan untuk dropdown, dll.

Saya awalnya menemukan cara CSS untuk mem-bypass ini ketika menggunakan plugin Cycle jQuery. Siklus menggunakan JavaScript untuk mengatur slide saya overflow: hidden, jadi ketika mengatur gambar saya ke width: 100%gambar akan terlihat terpotong secara vertikal, jadi saya memaksa mereka untuk terlihat dengan !importantdan untuk menghindari menampilkan animasi slide keluar dari kotak saya mengatur overflow: hiddenke div wadah dari meluncur. Semoga ini berhasil untuk Anda.

UPDATE - Solusi Baru:

Masalah asli -> http://jsfiddle.net/xMddf/1/ (Bahkan jika saya menggunakannya overflow-y: visiblemenjadi "otomatis" dan sebenarnya "gulir".)

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

Solusi baru -> http://jsfiddle.net/xMddf/2/ (Saya menemukan solusi menggunakan pembungkus div untuk menerapkan overflow-xdan overflow-yelemen DOM yang berbeda seperti yang disarankan oleh James Khoury tentang masalah penggabungan visibledan hiddensatu elemen DOM.)

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

Saya telah mengalami masalah ini ketika mencoba membuat sidebar posisi tetap dengan konten yang dapat digulir secara vertikal dan membuat anak - anak yang diposisikan secara absolut untuk ditampilkan di luar batas sidebar .

Pendekatan saya terdiri dari penerapan yang terpisah:

• sebuah overflow: visibleproperti untuk elemen sidebar
• sebuah overflow-y: autoproperti untuk sidebar wrapper batin

Silakan periksa contoh di bawah ini atau 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;
}

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

Saya menggunakan content+wrapperpendekatan ... tapi saya melakukan sesuatu yang berbeda dari yang disebutkan sejauh ini: saya memastikan bahwa batas pembungkus saya TIDAK sejajar dengan batas konten ke arah yang saya ingin terlihat .

CATATAN penting: Itu cukup mudah untuk mendapatkan content+wrapper, same-boundspendekatan untuk bekerja pada satu browser atau lain tergantung pada berbagai kombinasi css dari position, overflow-*, dll ... tapi aku tak pernah bisa menggunakan pendekatan yang untuk mendapatkan mereka semua benar (Edge, Chrome, Safari,. ..)

Tetapi ketika saya memiliki sesuatu seperti:

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

... semua browser senang.

Sekarang ada cara baru untuk mengatasi masalah ini - jika Anda menghapus posisi: relatif dari wadah yang perlu memiliki overflow-y terlihat, Anda dapat memiliki overflow-y terlihat dan overflow-x tersembunyi, dan sebaliknya (memiliki overflow- x terlihat dan meluap-y tersembunyi, pastikan wadah dengan properti yang terlihat tidak diposisikan relatif).

Lihat posting ini dari Trik CSS untuk detail lebih lanjut - ini bekerja untuk saya: https://css-tricks.com/popping-hidden-overflow/