Como, por exemplo, no site do Netflix quando os filmes vão rolando horizontalmente.
2 Respostas
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/">
-
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
-
3Nã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
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;
}