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)?

— Joedborg
fonte

Observe que margin-bottomcom um valor negativo vai bagunçar overflow-y: hiddenetc.

— Andrew

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