Jak usunąć poziomy pasek przewijania w div?

128

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

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

Ravi
źródło

Odpowiedzi:

208
overflow-x: hidden;

basarat
źródło
Dzięki zaoszczędziłeś dużo czasu. Czy ktoś może oznaczyć to jako zaakceptowaną odpowiedź plz.
Nagarajan SR
5
to jest złe rozwiązanie. Ponieważ w tym przypadku po prostu ukrywasz poziome przewijanie w kontenerze. Ale jeśli ten kontener jest zbyt szeroki, zawartość nie zmieści się w twoim kontenerze.
Alex Filatov,
38

Nie zapomnij napisać overflow-x: hidden;

Kod powinien być:

overflow-y: scroll;
overflow-x: hidden;
Ajit Bhandari
źródło
21

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;}
Basza
źródło
19

CSS

overflow-y: scroll;

Zobacz to na jsFiddle .

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

Alex
źródło
13

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

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
vasanth
źródło
10

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;
}
Mise
źródło
OP wymaga przewijania bez paska przewijania
T04435
8

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;
}
Shubham Jain
źródło
8

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

html, body {
    overflow-x: hidden;
}
Harshit Bansal
źródło
5

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

rspilhaus
źródło
2

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>

aero
źródło
0

Użyj tego fragmentu kodu.

.card::-webkit-scrollbar {
  display: none;
}
kamalesh biswas
źródło
-3

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;
Ash Darko
źródło