How to add a horizontal scrolling in CSS?

Asked

Viewed 20,112 times

0

Like, for example, on the Netflix website when movies are rolling horizontally.

html css

  • Some resolved?

2 answers

3

It depends on what you want to do. Essentially this is it:

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
}

The ideal is to apply right techniques in specific situations. It would be easier to provide relevant answers if you had posted as you are using.

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/">

I put in the Github for future reference.

  • I want for example... When you hover the mouse over the top of the top right of the image (two will be available, one on the left and one on the right), an automatic scroll will show other images.

  • Do you have any code of what you’re doing? Ask the question to show where CSS needs to be applied.

  • don’t have, I just have the images! I have no idea how I’m going to put this together, use iframe or not, if I’m going to need javascript kk

  • I want an equal scheme of Netflix only smaller, at 150px by 150px for example!

  • 3

    I have no way to see this, I would have to see your code. Also because yours may be different and not give to apply something similar to Netflix. Your question talks in horizontal scroll bar. That’s how it does, I can only be more specific if the question is more specific.

2

You can use display:inline-block with white-space:nowrap and overflow-x: scroll and overflow-y: hidden Sort of like this:

.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;
}

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

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.