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

Question

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

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

Answer 1

overflow-x: hidden;

Answer 2

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

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

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

Answer 3

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

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

Answer 4

CSS

overflow-y: scroll;

См. Это на jsFiddle .

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

Answer 5

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

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

Answer 6

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

.your-class {
   overflow: hidden; 
}

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

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

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

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

Answer 7

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

overflow:auto;

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

http://css -трюки.com /-CSS-перелив-свойство /

Answer 8

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

html, body {overflow-x: hidden;}

Answer 9

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

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

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

Таким образом, окончательный код будет таким:

div::-webkit-scrollbar{
  display: none;
}

Answer 10

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>