Come nascondere la barra di scorrimento

Impara come nascondere la barra di scorrimento utilizzando CSS.

Come nascondere la barra di scorrimento

Aggiungere overflow: hidden;può nascondere contemporaneamente sia la barra di scorrimento orizzontale che quella verticale.

Esempio

body {
  overflow: hidden; /* Nascondere le barre di scorrimento */
}

Prova tu stesso

Per nascondere solo la barra di scorrimento verticale o solo la barra di scorrimento orizzontale, utilizzare overflow-y o overflow-x:

Esempio

body {
  overflow-y: hidden; /* Nascondere la barra di scorrimento verticale */
  overflow-x: hidden; /* Nascondere la barra di scorrimento orizzontale */
}

Prova tu stesso

Attenzione,overflow:hidden Eliminerà anche le funzioni della barra di scorrimento. Non sarà possibile scorrere all'interno della pagina.

Nascondere la barra di scorrimento ma mantenere le funzioni

Per nascondere la barra di scorrimento ma continuare a farlo scorrere, è possibile utilizzare il seguente codice:

Esempio

/* Nascondere la barra di scorrimento per Chrome, Safari e Opera */
.example::-webkit-scrollbar {
  display: none;
}
/* Nascondere la barra di scorrimento per IE, Edge e Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Prova tu stesso

Il browser Webkit (come Chrome, Safari e Opera) supporta gli standard non ::-webkit-scrollbar Elemento pseudo, che ci permette di modificare l'aspetto della barra di scorrimento del browser. Supportato da IE e Edge -ms-overflow-style: supportata da Firefox proprietà scrollbar-width Proprietà, queste proprietà ci permettono di nascondere la barra di scorrimento ma mantenere le sue funzioni.

Pagine correlate

Guida:Overflow CSS

Manuale di riferimento:Proprietà overflow CSS