Como posso adicionar uma barra de rolagem vertical ao meu div automaticamente?


110

Quero adicionar uma barra de rolagem vertical ao meu <div>. Já tentei overflow: auto, mas não está funcionando. Testei meu código no Firefox e no Chrome.

Estou colando o código de estilo div aqui:

float: left;
width: 1000px;
overflow: auto;

um jsfiddle ou mais css com sua marcação
Ritabrata Gautam

12
Experimente isto: overflow-y:scrolle alguma altura . Vá até esta documentação .
Mr_Green

Obrigado Mr_Green pela sua resposta. Mas este código não está funcionando para mim.
Jay

Para fazer o Scroll funcionar, o conteúdo interno deve transbordar .
Mr_Green

Publique seu código html e css aqui.
Mr_Green

Respostas:


145

Você precisa atribuir alguma altura para fazer a overflow: auto;propriedade funcionar.
Para fins de teste, adicione height: 100px;e verifique.
e também será melhor se você der em overflow-y:auto;vez de overflow: auto;, porque isso faz com que o elemento role apenas na vertical, mas não na horizontal.

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

Se você não souber a altura do contêiner e quiser mostrar a barra de rolagem vertical quando o contêiner atingir uma altura fixa 100px, digamos , use em max-heightvez de heightpropriedade.

Para obter mais informações, leia este artigo MDN .


Sim, entendi e testei, funciona bem no Chrome, mas não no FireFox. Outra coisa confusa é que a barra de rolagem vertical está aparecendo no tempo de carregamento da página no FF, mas desapareceu quando o carregamento da página foi concluído!
Jay

"Você precisa atribuir alguma altura" exatamente o meu problema, obrigado! : P
Wagner da Silva

51

Você tem que adicionar max-heightpropriedade.

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}
<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>


20

Você pode definir:

overflow-y: scroll;height: XX px

2
isso foi sugerido por respostas anteriores.
UmNyobe

14

Eu tenho um scroller incrível no meu div-popup. Para aplicar, adicione este estilo ao seu elemento div:

overflow-y: scroll;
height: XXXpx;

O que heightvocê especificar será a altura do div e uma vez que se você tiver conteúdo que exceda esta altura, você terá que rolar.

Obrigado.


13

Para mostrar a barra de rolagem vertical em seu div, você precisa adicionar

height: 100px;   
overflow-y : scroll;

ou

height: 100px; 
overflow-y : auto;

10

Não tenho certeza para que você está tentando usar a div, mas este é um exemplo com algum texto aleatório.

Mr_Green deu as instruções corretas quando disse para adicionar, overflow-y: autopois isso restringe a rolagem vertical. Este é um exemplo JSFiddle:

JSFiddle


Em primeiro lugar, @Mr_Green, sua sugestão está funcionando bem no Chrome, mas não no FF. E há alguma alternativa de adicionar Height, porque eu não posso adicionar Height ao meu Div para minha estrutura de design.
Jay

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.