CODEWITHSUNDEEP
csshtmlhorizontal-scrolling
Andry
Andry

Reputation: 16845

How to activate horizontal scrolling inside a div by overflowing its content?

I have the following structure:

<div id='container'>
  <div id='cont1' style='width:150px'>Content 1</div>
  <div id='cont2' style='width:150px'>Content 2</div>
  <div id='cont3' style='width:150px'>Content 3</div>
  <div id='cont4' style='width:150px'>Content 4</div>
  <div id='cont5' style='width:150px'>Content 5</div>
</div>

I want div container to horizontally scroll. I want cont1 until cont5 to stay inside container. I want to be able to horizontally scroll these 5 divs and, possibly, I want to simply put one contx div next to the other exactly as I showed in the code.

The problem is that I cannot achieve this solution. For example consider:

<div id='container'>
  <div id='internalcontainer' style='width:750px'>
    <div id='cont1' style='width:150px'>Content 1</div>
    <div id='cont2' style='width:150px'>Content 2</div>
    <div id='cont3' style='width:150px'>Content 3</div>
    <div id='cont4' style='width:150px'>Content 4</div>
    <div id='cont5' style='width:150px'>Content 5</div>
  </div>
</div>

What seemed to me quite complicated to do is to obtain the horizontal scroll by simply putting one div next to the other (contant divs). So I tried to put them inside a fixed width container which is placed inside the div that should perform the horizontal scroll. Even this code does not work when i try to style it. My questions are:

I tried a lot with css overflow, but did not get anything...

Thanks

Upvotes: 0

Views: 1415

Answers (2)

Jairo
Jairo

Reputation: 111

Yes is possible with both structures. I'll illustrate the first one since it is less verbose. I'll use flex box CSS3 feature:

#container {
  display: inline-flex;
  flex-direction: row;
}
<div id='container'>
  <div id='cont1' style='width:150px'>Content 1</div>
  <div id='cont2' style='width:150px'>Content 2</div>
  <div id='cont3' style='width:150px'>Content 3</div>
  <div id='cont4' style='width:150px'>Content 4</div>
  <div id='cont5' style='width:150px'>Content 5</div>
</div>

If you want a scroll bar in the container itself you can add:

#container {
  overflow-x: scroll;
}

Upvotes: 0

bukart
bukart

Reputation: 4906

You can apply the style overflow-x:scroll to your container div if the event onmouseover is triggered and reset it to overflow-x:hidden if onmouseout is triggered.

edit

here's what you need to add to your container divs:

<div id='container' onmouseover='this.style["overflowX"]="scroll";'  onmouseout='this.style["overflowX"]="visible";'>
    ...
</div>

try it yourself: http://jsfiddle.net/bukfixart/qX8Cx/

Upvotes: 2

Related Questions