10

Tenho a seguinte div na minha página

<div id="divContent" class='content'>
            Bem vindo ao meu site <br />
            1 index index index index index index index index <br />
            2 index index index index index index index index <br />
            3 index index index index index index index index <br />
            4 index index index index index index index index <br />
            5 index index index index index index index index <br />
            6 index index index index index index index index <br />
            7 index index index index index index index index <br />
            8 index index index index index index index index <br />
            9 index index index index index index index index <br />
            10 index index index index index index index index <br />
            11 index index index index index index index index <br />
            12 index index index index index index index index <br />
            13 index index index index index index index index <br />
            14 index index index index index index index index <br />                                
        </div>

Abrindo a página no navegador do computador, todo seu conteúdo é exibido. Porém ao abrir em um celular por exemplo, o conteúdo não cabe na tela, escondendo as últimas linhas de conteúdo da DIV.

Tem alguma maneira de colocar um scroll só em caso de não caber o conteúdo em telas menores?

6
  • Você diz um scroll horizontal? Poderia adicionar o css que já possui?
    – Randrade
    19/01/2016 às 12:54
  • usa media query, da uma olhada na minha resposta, vc pode detectar monitores com resolucao menor e aplicar css para mostrar o scroll.
    – RBoschini
    19/01/2016 às 13:07
  • não funcionou o media query 19/01/2016 às 13:11
  • Ve esse fiddler jsfiddle.net/rboschini/05f0pxuc
    – RBoschini
    19/01/2016 às 14:14
  • Tira esses br's ai e adiciona um <p> coloca o texto com algum alinhamento e defina uma media query para resoluções baixas, se for texto puro nem precisa da media query por que o proprio navegador se encarrega de deixar o texto legível. 19/01/2016 às 15:05

1 Resposta 1

14

Tem como usar o css para mostrar as barras de rolagem.

#divContent{
 overflow:auto; 
}

Com isso sua div deve ter scroll sempre que precisar. Existem varias opções para diversos casos. Veja a definição no site da W3C.

overflow: visible|hidden|scroll|auto|initial|inherit;

Para deixar isso apenas para dispositivos mobile, você pode usar MediaQuery, para detectar a resolução e fazer suas alterações.

Exemplo:

/* mobile phone */
@media all and (max-width: 768px) {
    #divContent{
     overflow:auto; 
    }
}

Esse CSS vai ser aplicado apenas em resoluções até 768px, abrangendo inúmeros devices mobile. Veja esse jsFiddler com o MediaQuery funcionando.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .