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

Ответ 1

overflow-x: hidden;

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 4

CSS

overflow-y: scroll;

Посмотрите на jsFiddle.

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

Ответ 5

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

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

Ответ 6

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

.your-class {
   overflow: hidden; 
}

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

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

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

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

Ответ 7

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

overflow:auto;

и при необходимости будет отображаться полоса прокрутки.

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

Ответ 8

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>

Ответ 9

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

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

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

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

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

Ответ 10

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

html, body {overflow-x: hidden;}

Ответ 11

У меня были проблемы с тем, что я использовал

overflow:none;

Но знал, что CSS действительно не понравился, и он не работает на 100% от того, как я этого хотел.

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

overflow:auto;