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

128

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

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

Ravi
источник

Ответы:

208
overflow-x: hidden;

basarat
источник
Спасибо, вы сэкономили много времени. Может кто-нибудь отметить это как принятый ответ, пожалуйста.
Nagarajan SR
5
это плохое решение. Потому что в этом случае вы просто скрываете горизонтальную прокрутку в контейнере. Но если этот контейнер будет слишком широким, ваше содержимое не поместится в вашем контейнере.
Алекс Филатов
38

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

Код должен быть:

overflow-y: scroll;
overflow-x: hidden;
Аджит Бхандари
источник
21

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

.mydivclass {overflow-x: hidden; overflow-y: auto;}
паша
источник
19

CSS

overflow-y: scroll;

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

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

Алекс
источник
13

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

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
Взант
источник
10

Без прокрутки (без указания x или y):

.your-class {
   overflow: hidden;
}

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

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

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

.your-class {
   overflow-y: hidden;
}
Mise
источник
OP требует прокрутки без полосы прокрутки
T04435
8

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

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

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

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

div::-webkit-scrollbar {
  display: none;
}
Шубхам Джайн
источник
8

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

html, body {
    overflow-x: hidden;
}
Харшит Бансал
источник
5

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

overflow: auto;

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

См. Свойство CSS Overflow

rspilhaus
источник
2

Использование:

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>

аэро
источник
0

Используйте этот фрагмент кода ..

.card::-webkit-scrollbar {
  display: none;
}
Камалеш Бисвас
источник
-3

У меня были проблемы, когда я использовал

overflow: none;

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

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

overflow: auto;
Эш Дарко
источник