it-roy-ru.com

Как убрать горизонтальную полосу прокрутки в div?

Когда я устанавливаю overflow:scroll, я получаю горизонтальные и вертикальные полосы прокрутки. 

Есть ли способ удалить горизонтальную полосу прокрутки в div?

92
Ravi
overflow-x: hidden;

152
basarat

Не забудьте написать overflow-x:hidden;

код должен быть

overflow-y: scroll; overflow-x:hidden;

27
DevelopmentBucket

С overflow-y:scroll вертикальная полоса прокрутки всегда будет там, даже если она не нужна. Если вы хотите, чтобы y-scrollbar был виден только тогда, когда это необходимо, я обнаружил, что это работает:

.mydivclass {overflow-x: hidden; overflow-y: auto;}
16
Pasha

CSS

overflow-y: scroll;

Смотрите это на jsFiddle .

Обратите внимание, что при удалении -y из свойства overflow-y отображается горизонтальная полоса прокрутки.

14
alex

Добавьте этот код в свой CSS. Это отключит горизонтальную полосу прокрутки.

  html, body {
        max-width: 100%;
        overflow-x: hidden;
    }
11
vasanth

Нет прокрутки: // без указания х или у

.your-class {
   overflow: hidden; 
}

Удалить горизонтальную прокрутку:

.your-class {
   overflow-x: hidden; 
}

Удалить вертикальную прокрутку:

.your-class {
   overflow-y: hidden; 
}
6
Mise

Если вы ничего не переполняете по горизонтали, вы также можете просто использовать 

overflow:auto;

и он будет показывать полосы прокрутки только при необходимости.

http://css-tricks.com/the-css-overflow-property/

4
rspilhaus
overflow: auto;

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

Если у вас есть переполнение x и y, то будут показаны полосы прокрутки x и y. 

Чтобы скрыть горизонтальную полосу прокрутки x, даже если она есть, просто добавьте:

overflow-x: hidden;

body { font-family: sans-serif; }
.nowrap{
  white-space: nowrap;
 }

.container{ 
  height:200px; 
  width: 300px; 
  padding 10px; 
  border: 1px solid #444;
  
  overflow: auto;
  overflow-x: hidden;
 }
<div class="container">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
</ul>
</div>

1
aero

Чтобы скрыть горизонтальную полосу прокрутки, мы можем просто выбрать полосу прокрутки необходимого элемента div и установить для него display: none;

Следует отметить, что это будет работать только для браузеров на основе Webkit (например, Chrome), поскольку для Mozilla такой опции нет.

Чтобы выбрать полосу прокрутки, используйте ::-webkit-scrollbar

Итоговый код будет таким:

div::-webkit-scrollbar{
  display: none;
}
0
Shubham Jain

Чтобы удалить горизонтальную полосу прокрутки, используйте этот код. это 100% работает

html, body {overflow-x: hidden;}
0
Harshit Bansal