Jak usunąć poziomy pasek przewijania w div?

Po ustawieniu overflow: scrollotrzymuję poziome i pionowe paski przewijania.

Czy istnieje sposób na usunięcie poziomego paska przewijania w elemencie DIV?

overflow-x: hidden;

Nie zapomnij napisać overflow-x: hidden;

Kod powinien być:

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

W overflow-y: scrollprzypadku pionowego paska przewijania będzie zawsze, nawet jeśli nie jest potrzebny. Jeśli chcesz, aby pasek przewijania y był widoczny tylko wtedy, gdy jest potrzebny, zauważyłem, że to działa:

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

CSS

overflow-y: scroll;

Zobacz to na jsFiddle .

Zauważ, że jeśli usuniesz -yz overflow-ywłaściwości, pojawi się poziomy pasek przewijania.

Dodaj ten kod do swojego CSS. Spowoduje to wyłączenie poziomego paska przewijania.

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

Bez przewijania (bez określenia x lub y):

.your-class {
   overflow: hidden;
}

Usuń przewijanie poziome:

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

Usuń przewijanie pionowe:

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

Aby ukryć poziomy pasek przewijania, możemy po prostu wybrać pasek przewijania wymaganego div i ustawić go na display: none;

Należy zauważyć, że będzie to działać tylko w przeglądarkach opartych na WebKit (takich jak Chrome), ponieważ nie ma takiej opcji dla Mozilli.

Aby wybrać pasek przewijania, użyj ::-webkit-scrollbar

Tak więc ostateczny kod będzie wyglądał następująco:

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

Aby usunąć poziomy pasek przewijania, użyj następującego kodu. Działa w 100%.

html, body {
    overflow-x: hidden;
}

Jeśli nie masz nic wylewającego się w poziomie, możesz po prostu użyć

overflow: auto;

i pokaże paski przewijania tylko w razie potrzeby.

Zobacz Właściwość CSS Overflow

Posługiwać się:

overflow: auto;

Spowoduje to wyświetlenie pionowego paska przewijania i tylko w przypadku przepełnienia w pionie, w przeciwnym razie zostanie ukryty.

Jeśli masz przepełnienie zarówno x, jak i y, zostaną wyświetlone paski przewijania x i y.

Aby ukryć pasek przewijania x (poziomy), nawet jeśli jest obecny, po prostu dodaj:

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>

Aby ukryć scrollbar, ale zachowaj zachowanie.

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

Istnieją ograniczenia.

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

Użyj tego fragmentu kodu.

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

Miałem problemy, gdy używałem

overflow: none;

Ale wiedziałem, że CSS nie lubił tego i nie działał w 100% tak, jak bym chciał.

Jest to jednak idealne rozwiązanie, ponieważ żadna z moich treści nie powinna być większa niż zamierzona, a to rozwiązało problem, który miałem.

overflow: auto;