Як видалити горизонтальну смугу прокрутки в діві?

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

Чи є спосіб видалити горизонтальну смугу прокрутки в діві?

overflow-x: hidden;

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

Код повинен бути:

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

З overflow-y: scroll, вертикальна смуга прокрутки завжди буде там, навіть якщо вона не потрібна. Якщо ви хочете, щоб панель прокрутки бачилася лише тоді, коли вона потрібна, я знайшов це:

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

Щоб приховати горизонтальну смугу прокрутки, ми можемо просто вибрати смугу прокрутки потрібного діва та встановити його display: none;

Варто зазначити, що це працюватиме лише для браузерів на базі WebKit (наприклад, Chrome), оскільки для Mozilla немає такої опції.

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

Отже, остаточний код буде таким:

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

Щоб видалити горизонтальну смугу прокрутки, використовуйте наступний код. Це 100% працює.

html, body {
    overflow-x: hidden;
}

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

overflow: auto;

і він відображатиме лише смуги прокрутки лише у разі потреби.

Див . Властивість переповнення CSS

Використання:

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;