CSS элемент div - как показывать только горизонтальные полосы прокрутки?

Question

У меня есть контейнер div, и я определил его стиль следующим образом:

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

Это дает мне горизонтальные и вертикальные полосы прокрутки автоматически, как только я заполняю свою таблицу, которая содержится в этом div. Я просто хочу, чтобы только горизонтальные полосы прокрутки появлялись автоматически. Я изменю высоту стола программно.

Как мне это сделать?

Answer 1

Вы не должны получать как горизонтальные, так и вертикальные полосы прокрутки, если вы не сделаете контент достаточно большим, чтобы требовать их.

Однако вы обычно делаете это в IE из-за ошибки. Проверьте в других браузерах (Firefox и т. Д.), Чтобы узнать, действительно ли это делает только IE.

IE6-7 (среди других браузеров) поддерживает предлагаемое расширение CSS3 для независимой установки полос прокрутки, которое можно использовать для подавления вертикальной полосы прокрутки:

overflow: auto;
overflow-y: hidden;

Вам также может понадобиться добавить для IE8:

-ms-overflow-y: hidden;

, поскольку Microsoft угрожает переместить все свойства, предшествующие стандарту CR, в свое собственное поле "-ms" в режиме стандартов IE8. (Это имело бы смысл, если бы они всегда так делали, но сейчас это неудобство для всех.)

С другой стороны, вполне возможно, что IE8 все равно исправит ошибку.

Answer 2

Мне также пришлось добавить white-space: nowrap; к стилю, в противном случае элементы обернулись бы в область, к которой мы удаляем возможность прокрутки.

Answer 3

Это решение без указания высоты / ширины для дочернего элемента div , поэтому оно будет реагировать на изменение размера окна, и наиболее полезная причина - горизонтальные полосы прокрутки появляются просто при необходимости.

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

Взгляните на DEMO

Answer 4

Показать оба:

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

Скрыть ось X:

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

Скрыть ось Y:

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

Answer 5

вы также можете сделать его overflow: auto и задать максимальную фиксированную высоту и ширину, чтобы при переполнении текста или чего-либо еще отображалась только требуемая полоса прокрутки

Answer 6

Я использую свойства CSS: 1) «overflow-x: auto»; 2) «overflow-y: hidden»; 3) "white-space: nowrap";

Не забудьте установить ширину, как для контейнера, так и для внутренних компонентов DIVS. Свойство "white-space: nowrap" позволяет внутренним DIVS не падать на другую строку.

С учетом следующего HTML:

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

Я использую следующий CSS, чтобы иметь только горизонтальную прокрутку:

.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/ (не работает с вышеуказанным кодом)

Answer 7

Используйте следующее

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

Answer 8

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

Answer 9

CSS3 обладает свойством overflow-x, но я бы не ожидал, что это поддержит. В CSS2 все, что вы можете сделать, это установить общую политику scroll и заставить свои widths и heights не портить их.

Answer 10

Мы должны установить overflow: auto и скрыть полосу прокрутки, которую мы не используем для работы с неподдерживаемым браузером CSS3. Посмотрите на это Переполнение CSS; XME.im