CSS div öğesi - yalnızca yatay kaydırma çubukları nasıl gösterilir?

Bir div konteyner var ve onun tarzı aşağıdaki gibi tanımladım:

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

Bu divın içerdiği masamı doldurduğumda bana hem yatay hem de dikey kaydırma çubukları veriyor. Yalnızca yatay kaydırma çubuklarının otomatik olarak görünmesini istiyorum. Tablonun yüksekliğini programlı olarak değiştireceğim.

Bunu nasıl yaparım?

İçeriği gerektirecek kadar büyük yapmadığınız sürece hem yatay hem de dikey kaydırma çubukları almamalısınız.

Ancak IE'de genellikle bir hata nedeniyle yaparsınız. Aslında bunu yapan sadece IE olup olmadığını öğrenmek için diğer tarayıcılarda (Firefox vb.) Kontrol edin.

IE6-7 (diğer tarayıcıların yanı sıra) kaydırma çubuklarını bağımsız olarak ayarlamak için önerilen CSS3 uzantısını destekler ve dikey kaydırma çubuğunu bastırmak için kullanabilirsiniz:

overflow: auto;
overflow-y: hidden;

IE8 için de eklemeniz gerekebilir:

-ms-overflow-y: hidden;

Microsoft, tüm CR öncesi standart özelliklerini IE8 Standartları Modunda kendi '-ms' kutusuna taşımakla tehdit ediyor. (Bunu her zaman bu şekilde yapsaydı mantıklı olurdu, ama şimdi herkes için bir rahatsızlık.)

Öte yandan IE8 hatayı yine de düzeltmiş olacak.

Ayrıca white-space: nowrap;stile eklemek zorunda kaldım , aksi takdirde öğeler kaydırma yeteneğini kaldırdığımız alana sarılır.

Bu çözüm, baba div için yükseklik / genişlik belirtimi içermez, bu nedenle pencere yeniden boyutlandırmasına yanıt verir ve en kullanışlı neden yatay kaydırma çubuklarının yalnızca gerekirse görünür.

.container{
    padding:20px;
    border:dotted 1px;
    white-space:nowrap;
    overflow-x:auto;
}

.box{
    width:100px;
    height:180px;
    background-color: red;
    margin:10px;
    display:inline-block
}

Bir göz atın DEMO

Her ikisini de göstermek için:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

X Eksenini Gizle:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

Y Eksenini Gizle:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

ayrıca bunu yapabilir overflow: autove maksimum sabit yükseklik ve genişlik verebilirsiniz, böylece metin veya içeride ne varsa taşarsa yalnızca gerekli kaydırma çubuğunu gösterir

CSS özelliklerini kullanıyorum: 1) " overflow-x: auto"; 2) " overflow-y: hidden"; 3) "white-space: nowrap ";

Hem konteyner hem de iç DIVS bileşenleri için bir Genişlik ayarlamayı unutmayın. Mülkiyet "beyaz boşluk: nowrap" , iç DIVS'nin farklı bir hatta düşmemesini sağlar.

Aşağıdaki HTML dikkate alındığında:

<div class="container"> 
  <div class="inner-1"></div>
  <div class="inner-2"></div>
  <div class="inner-3"></div>
</div>

Yalnızca yatay kaydırma için aşağıdaki CSS'yi kullanıyorum:

.container {
  height: 80px;
  width: 600px;
  overflow-x: auto;
  overflow-y: hidden; 
  white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
  height: 60px;
  max-width: 250px;
 display: inline-block; /* this should fix it */
}

Keman: https://jsfiddle.net/qrjh93x8/ (yukarıdaki kodla çalışmıyor)

Aşağıdakileri kullanın

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px;  border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none;  width:140px; }

CSS3 vardıroverflow-x özelliğini, ama bunun için büyük destek beklemek değildir. In BB2 Yapabileceğiniz tüm genel ayarlanır scrollpolitikasını ve çalışmanızı widthsve heightskarışıklık onları değil.

overflow: autoDesteklemeyen CSS3 tarayıcısında çalışmadığımız bir kaydırma çubuğunu ayarlamalı ve gizlemeliyiz. Şu CSS Taşmasına bakın; XME.im