it-swarm-pt.tech

Defina uma div dentro de uma div para rolar, enquanto o pai não rola

Eu tenho um div de contêiner que contém muitos divs filhos. Um dos divs no meu contêiner abriga comentários. Em vez de definir a div inteira para rolar, quero que tudo permaneça no lugar, deixando apenas a div dos comentários para rolar. Tentei definir o estouro pai como oculto e o comentário div para rolar, e a barra de rolagem é realmente exibida na página, mas está desativada. Alguém sabe como eu posso conseguir isso?

CSS

#container
{                
   position: absolute; 
   overflow: hidden; 
}

#comments
{
   position: relative;
   overflow: scroll; 
}

HTML

<div id="container">
   <div id="comments">
      this is what I want to scroll
   </div>
</div>

Não consigo me livrar do contêiner porque ele abriga muitos outros elementos filhos. Eu só quero que todo o resto permaneça estático, enquanto apenas os comentários podem rolar.

32
user981053

Você precisa definir uma altura específica na div "comments" para garantir que ele saiba exatamente quando rolar. Se não houver conteúdo suficiente para preencher esse contêiner além da altura especificada, a barra de rolagem poderá aparecer com overflow:scroll mas será desativado. Se você quiser que a barra de rolagem apareça apenas quando for realmente necessária, use overflow:auto como a regra CSS. Ao definir a altura do contêiner filho e não o pai, o pai pode crescer conforme necessário.

No seu exemplo, o position:absolute no contêiner pai não é necessário para obter a solução; no entanto, você pode incluir isso por algum outro motivo.

26
TLS

Está desativado porque não há altura definida no elemento. O estouro automático preencherá a barra de rolagem se você definir uma altura e o conteúdo ultrapassar essa altura.

#comments{
    height:200px;
    width:200px;
    position: relative;
    overflow: auto; 
}
12
Kai Qing

Você precisa adicionar uma largura e altura:

Confira este JSFiddle: http://jsfiddle.net/FgGmQ/

HTML:

<div id="container">
<span>This is the container</span>
<div id="comments">
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll, 
</div>
<span>The end of the container</span>

CSS:

#container{
    overflow: hidden;
}
#container span{
    background-color: yellow;   
}
#comments{
    overflow: auto; 
    height: 80px;
    width:150px;
}

Mais uma vez, basta verificar este JSFiddle

4
Anil