Element div CSS - jak wyświetlać tylko poziome paski przewijania?

Mam kontener div i zdefiniowałem jego styl w następujący sposób:

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

To daje mi zarówno poziome, jak i pionowe paski przewijania automatycznie po zapełnieniu mojego stołu, który jest zawarty w tym div. Chcę tylko, aby automatycznie pojawiały się tylko poziome paski przewijania. Zmodyfikuję wysokość stołu programowo.

Jak mam to zrobic?

Nie powinieneś wyświetlać zarówno poziomych, jak i pionowych pasków przewijania, chyba że zawartość jest wystarczająco duża, aby ich wymagać.

Jednak zazwyczaj robisz to w IE z powodu błędu. Sprawdź w innych przeglądarkach (Firefox itp.), Aby dowiedzieć się, czy w rzeczywistości robi to tylko IE.

IE6-7 (między innymi przeglądarkami) obsługuje proponowane rozszerzenie CSS3 do niezależnego ustawiania pasków przewijania, których można użyć do zniesienia pionowego paska przewijania:

overflow: auto;
overflow-y: hidden;

W przypadku IE8 może być konieczne dodanie:

-ms-overflow-y: hidden;

ponieważ Microsoft grozi przeniesieniem wszystkich właściwości sprzed standardu CR do własnego pola „-ms” w trybie norm IE8. (Miałoby to sens, gdyby zawsze tak robili, ale teraz jest to raczej niedogodność dla wszystkich).

Z drugiej strony jest całkowicie możliwe, że IE8 i tak naprawi błąd.

Musiałem też dodać white-space: nowrap;do stylu, w przeciwnym razie elementy zawiną się w obszar, do którego usuwamy możliwość przewijania.

To rozwiązanie nie ma specyfikacji wysokości / szerokości dla div div, więc będzie reagować na zmianę rozmiaru okna i najbardziej przydatne, ponieważ poziome paski przewijania pojawiają się tylko w razie potrzeby.

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

Spójrz na DEMO

Aby pokazać oba:

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

Ukryj oś X:

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

Ukryj oś Y:

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

możesz to zrobić overflow: autoi podać maksymalną stałą wysokość i szerokość w ten sposób, gdy tekst lub cokolwiek tam jest, przepełnia się, pokaże tylko wymagany pasek przewijania

Korzystam z właściwości CSS: 1) „ overflow-x: auto”; 2) „ overflow-y: hidden”; 3) „ white-space: nowrap”;

Nie zapomnij ustawić szerokości, zarówno dla kontenera, jak i wewnętrznych komponentów DIVS. Właściwość „white-space: nowrap” pozwala wewnętrznym DIVS nie upaść na inną linię.

Biorąc pod uwagę następujący kod HTML:

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

Używam następującego CSS, aby mieć tylko przewijanie w poziomie:

.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 */
}

Fiddle: https://jsfiddle.net/qrjh93x8/ (nie działa z powyższym kodem)

Użyj następujących

<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 ma tę overflow-xwłaściwość, ale nie spodziewałbym się po tym wspaniałego wsparcia. W CSS2 wszystko, co możesz zrobić, to ustalić ogólne scrollzasady i pracować nad nimi, widthsa heightsnie je popsuć.

Powinniśmy ustawić overflow: autoi ukryć pasek przewijania, którego nie używamy do pracy z nieobsługiwaną przeglądarką CSS3. Spójrz na to przepełnienie CSS; XME.im