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;
css html scrollbar overflow gaio
fonte
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 .

Senhor Verde
fonte
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>
Expandir snippet

DevT
fonte
20

Você pode definir:

overflow-y: scroll;height: XX px

fonte
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.

Ataboy Josef
fonte
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;
Ricardo Romo
fonte
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

MitulP91
fonte
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
2 

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Expandir snippet

GURU PRASAD
fonte
2
Por favor, acrescente explicação à sua resposta
Mastisa
a fonte (e a explicação) parece ser: simurai.com/blog/2011/07/26/webkit-scrollbar .
cobberboy