CSS taşması-x: görünür; ve taşma-y: gizli; kaydırma çubuğu sorununa neden oluyor

Bir stiliniz ve işaretlemeniz olduğunu varsayalım:

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>

Bunu gördüğünüzde. <ul>Ben taşma x / y görebilir ve gizli değerleri belirttiğiniz halde alt kısmında bir kaydırma çubuğu vardır.

(Chrome 11 ve opera (?) üzerinde gözlemlenmiştir)

Bazı w3c spec ya da bunun olmasını söyleyen bir şey olmalı tahmin ediyorum ama benim hayatım için neden çalışamıyorum.

JSFiddle

GÜNCELLEME: - Etrafına sarılmış başka bir eleman ekleyerek aynı sonucu elde etmenin bir yolunu buldum ul. Bunu kontrol et.

Bazı ciddi aramalardan sonra sorumun cevabını buldum gibi görünüyor:

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

Gecko, Safari, Opera'da, 'görünür', 'gizli' ile birleştirildiğinde de 'otomatik' olur (başka bir deyişle: 'görünür', 'görünür' ifadesinden farklı bir şeyle birleştirildiğinde 'otomatik' olur). Gecko 1.8, Safari 3, Opera 9.5 aralarında oldukça tutarlıdır.

ayrıca W3C spesifikasyonu şunları söylüyor:

'Overflow-x' ve 'overflow-y' hesaplanan değerleri belirtilen değerlerle aynıdır, ancak 'görünür' ile bazı kombinasyonlar mümkün değildir: biri 'görünür' olarak ve diğeri 'kaydırma' ise veya 'otomatik', ardından 'görünür' 'otomatik' olarak ayarlanır. 'Taşma-y' aynıysa, hesaplanan 'taşma' değeri 'taşma-x' hesaplanan değerine eşittir; aksi takdirde 'overflow-x' ve 'overflow-y' hesaplanan değerlerin çiftidir.

Kısa versiyon:

İkisinden biri visibleiçin overflow-xveya overflow-ydiğeri dışında bir şey kullanıyorsanız visible, visibledeğer olarak yorumlanır auto.

hile yapıyor gibi görünüyor başka bir ucuz kesmek:

style="padding-bottom: 250px; margin-bottom: -250px;"dikey taşmanın kesildiği öğede 250, açılır kutunuz için ihtiyacınız olduğu kadar çok pikseli temsil eder.

Başlangıçta Cycle jQuery eklentisini kullanırken bunu atlamak için bir CSS yolu buldum. Döngü, slaytımı ayarlamak için JavaScript kullanıyor overflow: hidden, bu yüzden resimlerimi resimlere ayarlarken width: 100%dikey olarak kesilmiş görünecek ve bu yüzden onları görünür olmaya zorladım !importantve slayt animasyonunu kutudaki overflow: hiddenkonteyner div'a ayarladığım kutudan göstermekten kaçınmaya zorladım kaymak. Umarım sizin için çalışır.

GÜNCELLEME - Yeni Çözüm:

Orijinal sorun -> http://jsfiddle.net/xMddf/1/ ( Kullansam bile overflow-y: visible"otomatik" ve aslında "kaydırma" olur.)

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

Yeni çözüm -> http://jsfiddle.net/xMddf/2/ ( James Khoury'nin birleştirme sorununa ve tek bir DOM öğesine önerdiği gibi, farklı DOM öğelerine uygulamak ve farklı DOM öğelerine bir sarmalayıcı div kullanarak bir çözüm buldum .)overflow-xoverflow-yvisiblehidden

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

Bir inşa etmeye çalışırken bu sorunu çalıştırmak ettik sabit konumlandırılmış kenar çubuğu hem dikey ile kaydırılabilir içerik ve iç içe mutlak çocukları konumlandırılmış olması dışında kenar çubuğu sınırları görüntülenir .

Benim yaklaşımım ayrıca uygulanıyordu:

• overflow: visiblekenar çubuğu öğesine bir özellik
• overflow-y: autokenar çubuğu iç sarmalayıcısına bir özellik

Lütfen aşağıdaki örneği veya çevrimiçi kod kodunu kontrol edin .

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>

content+wrapperYaklaşımı kullandım ... ama şimdiye kadar belirtilenden farklı bir şey yaptım: Sarıcılarımın sınırlarının, görünür olmak istediğim yönde içeriğin sınırları ile uyumlu OLMADIĞINDAN emin oldum .

Önemli NOT: almak kolay yeterliydi content+wrapper, same-boundsçeşitli css kombinasyonları bağlı olarak bir tarayıcı veya başka çalışma yaklaşım position, overflow-*vb ... ama onlara almak için bu yaklaşımı kullanabilirsiniz asla bütün doğru (Edge Chrome, Safari,. ..).

Ama böyle bir şey vardı:

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

... tüm tarayıcılar mutluydu.

Artık bu sorunu ele almanın yeni bir yolu var - konumu kaldırırsanız: taşma-y görünür olması gereken kaptan göreli olarak taşma-y görünür ve taşma-x gizli olabilir (veya tersi (taşma- x görünür ve taşma-y gizli, sadece visible özelliğine sahip kabın nispeten konumlandırılmadığından emin olun).

Daha fazla ayrıntı için CSS Tricks'ten bu gönderiye bakın - benim için çalıştı: https://css-tricks.com/popping-hidden-overflow/