0

Como, por exemplo, no site do Netflix quando os filmes vão rolando horizontalmente.

1
  • Alguma resolveu?
    – Maniero
    Commented 15/07/2015 às 17:20

2 Respostas 2

3

Depende do que você quer fazer. Essencialmente é isto:

body { //aqui pode ser outro elemento específico que quiser
    overflow-x: hidden; //se realmente quer impedir que tenha uma barra horizontal.
    overflow-y: scroll; //pode-se usar auto para deixar o browser decidir quando usar.
    white-space: nowrap; //n]ao deixa quebrar a linha
}

O ideal é aplicar técnicas certas em situações específicas. Seria mais fácil fornecer respostas relevantes se você tivesse postado como está usando.

body { 
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
} 
  <img src="http://lorempixel.com/150/150/people/0/a/">
  <img src="http://lorempixel.com/150/150/people/0/b/">
  <img src="http://lorempixel.com/150/150/people/0/c/">
  <img src="http://lorempixel.com/150/150/people/0/d/">
  <img src="http://lorempixel.com/150/150/people/0/e/">
  <img src="http://lorempixel.com/150/150/people/0/f/">

Coloquei no GitHub para referência futura.

5
  • quero por exemplo... Quando passar o mouse por cima da ceta a direita da imagem (estarão disponíveis duas, uma a esquerda e outra a direita), aconteça uma rolagem automática apresentando outras imagens. Commented 16/02/2015 às 21:37
  • Você tem algum código do que está fazendo? Coloque na pergunta para mostrar onde o CSS precisa ser aplicado.
    – Maniero
    Commented 16/02/2015 às 21:40
  • não tenho, só tenho as imagens! não tenho ideia de como vou montar isso, uso iframe ou não, se vou precisar de javascript kk Commented 16/02/2015 às 21:43
  • quero um esquema igual do netflix só que menor, em 150px por 150px por exemplo! Commented 16/02/2015 às 21:43
  • 3
    Não tenho como ver isto, eu teria que ver o seu código. Até porque o seu pode ser diferente e não dar para aplicar algo igual ao Netflix. Sua pergunta fala em barra de rolagem horizontal. É assim que faz, eu só posso ser mais específico se a pergunta for mais específica.
    – Maniero
    Commented 16/02/2015 às 21:48
2

Você pode usar display:inline-block com white-space:nowrap e overflow-x: scroll e overflow-y: hidden Mais ou menos assim:

.scroll { 
    overflow-x: scroll;
    overflow-y: hidden;
    height: 200px;
    white-space:nowrap;
} 

img { 
    box-shadow: 1px 1px 10px #999; 
    margin: 2px;
    max-height: 150px;
    cursor: pointer;
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:top;
}

Veja: http://jsfiddle.net/YbrX3/844/

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