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

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

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

overflow-x: hidden;

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

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

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

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

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

CSS

overflow-y: scroll;

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

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

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

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

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

.your-class {
   overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

html, body {
    overflow-x: hidden;
}

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

overflow: auto;

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

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

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

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>

Чтобы скрыть свое scrollbar, но сохранить поведение.

div::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

На это есть ограничения.

• https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

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

.card::-webkit-scrollbar {
  display: none;
}

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

overflow: none;

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

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

overflow: auto;