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

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

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

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

CSS

overflow-y: scroll;

См. на jsFiddle.

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

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

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

Добавьте этот код в свой 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-x:hidden;

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

Использовать:

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;
}

Удаляет ГОРИЗОНТАЛЬНУЮ полосу прокрутки при РАЗРЕШЕНИИ на прокрутку и НИЧЕГО больше.

&::-webkit-scrollbar:horizontal {
  height: 0;
  width: 0;
  display: none;
}

&::-webkit-scrollbar-thumb:horizontal {
  display: none;
}

Скрыть полосы прокрутки

шаг 1:

шаг 2:

 overflow: hidden; /* Hide scrollbars */

теперь перейдите, чтобы добавить файл .css в проект и включить файл

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

overflow: none;

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

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

overflow: auto;