Disabilita la barra di scorrimento verticale su div overflow: auto

113

È possibile consentire solo una barra di scorrimento orizzontale quando si utilizza overflow: auto (o scroll)?

— joedborg
fonte

Nota che margin-bottomcon un valore negativo si confondono overflow-y: hiddenecc.

— Andrew

232

Queste due proprietà CSS possono essere utilizzate per nascondere le barre di scorrimento:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

— Luca
fonte

@Coulton E per quanto riguarda Safari e Chrome?

— QMaster

Secondo questo funziona in Safari e so che funziona in Chrome.

— Luca

3

Vale la pena ricordare che puoi ancora scorrere nel div utilizzando tab, a condizione che ci siano collegamenti o elementi di input

— nell'overflow

40

Dovresti usare solo

overflow-y:hidden; - Usalo per nascondere lo scorrimento verticale

overflow-x:auto; - Usa questo per mostrare lo scorrimento orizzontale

Luke ha menzionato come entrambi nascosti. quindi ho dato questo separatamente.

— Siva Charan
fonte

21

overflow: auto;
overflow-y: nascosto;

Per IE8: -ms-overflow-y: nascosto;

O altro :

Per nascondere X :

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

Per nascondere Y :

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>

— Tizio a caso
fonte

8

Se vuoi ottenere lo stesso risultato in Gecko (NS6 +, Mozilla, ecc.) E IE4 + contemporaneamente, credo che questo dovrebbe fare il trucco: V

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}

Questo verrà applicato all'intero tag body, aggiornalo al tuo CSS pertinente e applica queste proprietà.

— Nirav Mehta
fonte

2

Aggiungi quanto segue:

body{
overflow-y:hidden;
}

— Zeinab
fonte

1

Queste regole sono compatibili con tutti i browser:

body {overflow: hidden; }
body::-webkit-scrollbar { width: 0 !important; }
body { overflow: -moz-scrollbars-none; }
body { -ms-overflow-style: none; }

— tamueka
fonte

1

Che ne dici di una notazione abbreviata?

{overflow: auto hidden;}

— Chong Lip Phang
fonte

0

se vuoi disabilitare la barra di scorrimento, ma puoi comunque scorrere il contenuto del DIV interno, usa il codice sottostante in css,

.divHideScroll::-webkit-scrollbar {
    width: 0 !important
}
.divHideScroll {
    overflow: -moz-scrollbars-none;
}
.divHideScroll {
    -ms-overflow-style: none;
}

divHideScroll è il nome della classe del div di destinazione.

Funzionerà con tutti i principali browser (Chrome, Safari, Mozilla, Opera e IE)

— Tahir Alvi
fonte