Come rimuovo la barra di scorrimento orizzontale in un div?

Quando imposto overflow: scroll, ottengo barre di scorrimento orizzontali e verticali.

C'è un modo per rimuovere la barra di scorrimento orizzontale in un div?

overflow-x: hidden;

Non dimenticare di scrivere overflow-x: hidden;

Il codice dovrebbe essere:

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

Con overflow-y: scroll, la barra di scorrimento verticale sarà sempre lì anche se non è necessaria. Se vuoi che y-scrollbar sia visibile solo quando è necessario, ho scoperto che funziona:

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

CSS

overflow-y: scroll;

Guardalo su jsFiddle .

Si noti che se si rimuove -ydalla overflow-yproprietà, viene visualizzata la barra di scorrimento orizzontale.

Aggiungi questo codice al tuo CSS. Disabiliterà la barra di scorrimento orizzontale.

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

No scroll (senza specificare x o y):

.your-class {
   overflow: hidden;
}

Rimuovi scorrimento orizzontale:

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

Rimuovi scorrimento verticale:

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

Per nascondere la barra di scorrimento orizzontale, possiamo semplicemente selezionare la barra di scorrimento del div richiesto e impostarla su display: none;

Una cosa da notare è che funzionerà solo con browser basati su WebKit (come Chrome) in quanto non esiste tale opzione disponibile per Mozilla.

Per selezionare la barra di scorrimento, utilizzare ::-webkit-scrollbar

Quindi il codice finale sarà così:

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

Per rimuovere la barra di scorrimento orizzontale, utilizzare il seguente codice. Funziona al 100%.

html, body {
    overflow-x: hidden;
}

Se non hai nulla che trabocca in orizzontale, puoi anche semplicemente usare

overflow: auto;

e mostrerà le barre di scorrimento solo quando necessario.

Vedi la proprietà Overflow CSS

Uso:

overflow: auto;

Questo mostrerà la barra di scorrimento verticale e solo se c'è un overflow verticale, altrimenti verrà nascosta.

Se hai un overflow sia x che y, verranno mostrate entrambe le barre di scorrimento xey.

Per nascondere la barra di scorrimento x (orizzontale), anche se presente è sufficiente aggiungere:

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>

Per nascondere il scrollbar, ma mantenere il comportamento.

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

Ci sono limiti a questo.

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

Usa questo pezzo di codice ..

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

Avevo avuto problemi dove stavo usando

overflow: none;

Ma sapevo che ai CSS non piaceva davvero e non funzionava al 100% per come volevo.

Tuttavia, questa è una soluzione perfetta poiché nessuno dei miei contenuti dovrebbe essere più grande del previsto e questo ha risolto il problema che avevo.

overflow: auto;