Desative a barra de rolagem vertical no estouro de div: automático

113

É possível permitir apenas uma barra de rolagem horizontal ao usar overflow: auto (ou scroll)?

html css scroll scrollbar Joedborg
fonte
Observe que margin-bottomcom um valor negativo vai bagunçar overflow-y: hiddenetc.
Andrew

Respostas:

232

Essas duas propriedades CSS podem ser usadas para ocultar as barras de rolagem:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal
Lucas
fonte
@Coulton E quanto ao safari e ao cromo?
QMaster
De acordo com isso , funciona no Safari e sei que funciona no Chrome.
Lucas
3
Vale a pena mencionar que você ainda pode rolar na div usando tab, desde que haja links ou elementos de entrada no estouro oculto
William Brochmann
40

Você deve usar apenas

overflow-y:hidden; - Use isto para esconder a rolagem vertical

overflow-x:auto; - Use para mostrar a rolagem horizontal

Luke mencionou como ambos ocultos. então eu dei isso separadamente.

Siva Charan
fonte
21

estouro: automático;
overflow-y: oculto;

Para IE8: -ms-overflow-y: oculto;

Se não :

Para ocultar X :

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

Para ocultar Y :

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>
Cara aleatório
fonte
8

Se você quiser fazer o mesmo no Gecko (NS6 +, Mozilla, etc) e no IE4 + simultaneamente, acredito que isso deve resolver o problema: V

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

Isso será aplicado a tag de corpo inteiro, atualize-o para seu css relevante e aplique essas propriedades.

Nirav Mehta
fonte
2

Adicione o seguinte:

body{
overflow-y:hidden;
}
Zeinab
fonte
1

Estas regras são compatíveis com todos os navegadores:

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

Que tal uma notação abreviada?

{overflow: auto hidden;}
Chong Lip Phang
fonte
0

se você deseja desativar a barra de rolagem, mas ainda capaz de rolar o conteúdo do DIV interno, use o código abaixo em css,

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

divHideScroll é o nome da classe do div de destino.

Funcionará em todos os principais navegadores (Chrome, Safari, Mozilla, Opera e IE)

Tahir Alvi
fonte