Hoe verwijder ik de horizontale schuifbalk in een div?

Als ik overflow: scrollinstel, krijg ik horizontale en verticale schuifbalken.

Is er een manier om de horizontale schuifbalk in een div te verwijderen?

Antwoord 1, autoriteit 100%

overflow-x: hidden;

Antwoord 2, autoriteit 22%

Vergeet niet overflow-x: hidden;

. te schrijven

De code moet zijn:

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

Antwoord 3, autoriteit 10%

CSS

overflow-y: scroll;

Bekijk het op jsFiddle.

Merk op dat als u de -yuit de eigenschap overflow-yverwijdert, de horizontale schuifbalk wordt weergegeven.

Antwoord 4, autoriteit 10%

Met overflow-y: scrollzal de verticale schuifbalk er altijd zijn, zelfs als deze niet nodig is. Als je wilt dat de y-scrollbar alleen zichtbaar is wanneer het nodig is, heb ik ontdekt dat dit werkt:

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

Antwoord 5, autoriteit 7%

Voeg deze code toe aan uw CSS. Het zal de horizontale schuifbalk uitschakelen.

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

Antwoord 6, autoriteit 7%

Niet scrollen (zonder x of y op te geven):

.your-class {
   overflow: hidden;
}

Horizontale scroll verwijderen:

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

Verwijder verticale scroll:

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

Antwoord 7, autoriteit 6%

Om de horizontale schuifbalk te verbergen, kunnen we gewoon de schuifbalk van de gewenste div selecteren en deze instellen op display: none;

Een ding om op te merken is dat dit alleen werkt voor op WebKit gebaseerde browsers (zoals Chrome), omdat een dergelijke optie niet beschikbaar is voor Mozilla.

Gebruik ::-webkit-scrollbar

om de schuifbalk te selecteren

Dus de uiteindelijke code ziet er als volgt uit:

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

Antwoord 8, autoriteit 3%

Gebruik de volgende code om de horizontale schuifbalk te verwijderen. Het werkt 100%.

html, body {
    overflow-x: hidden;
}

Antwoord 9, autoriteit 3%

Als er niets horizontaal overloopt, kun je ook gewoon

overflow: auto;

en er worden alleen schuifbalken weergegeven als dat nodig is.

Zie De CSS Overflow-eigenschap

Antwoord 10

overflow-x:hidden;

Het kan echter voorkomen dat uw inhoud op de website niet wordt weergegeven. Het is dus het beste om het element te inspecteren en de breedte van uw divs of secties te controleren, en eventuele rechter-/linksmarges die het extra heeft toegevoegd te verwijderen. Veel betere oplossing

Antwoord 11

Gebruik:

overflow: auto;

Hiermee wordt de verticale schuifbalk weergegeven en alleen als er een verticale overloop is, anders wordt deze verborgen.

Als u zowel een x- als een y-overloop hebt, worden zowel de x- als de y-schuifbalken weergegeven.

Om de x (horizontale) schuifbalk te verbergen, zelfs indien aanwezig, voeg je gewoon toe:

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>

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

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

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

overflow: hidden; /* Hide scrollbars */

overflow: none;

overflow: auto;