How can I make a div scroll horizontally

Question

I want to create a layout in which I will like to align contents in a horizontal direction but let each row scroll-able in horizontal direction only. Here is my JSFiddle Sample.

.x-scroller{
    overflow-x: scroll; 
    overflow-y:hidden; 
    height:100px; 
    width: 300px
}

The .x-scroller DIV will be dynamically generated in a loop with her contents, each of the x-scroller DIV will equally have some contents which I will like to be able to scroll in horizontal direction only as can be seen in the picture below:

The .x-scroller DIV will dynamically generated in a loop with her contents each of the x-scroller DIV will equally have some contents which I will like to be able to scroll in horizontal direction only

I'm not sure I get what you want. You want the 2 paragraphs of text to be next to each other? — putvande, Aug 14 '14 at 16:37
It can be as many divs as possible, each will occupy a row (display: block) of its own but I want the contents to be horizontally scroll-able — Paullo, Aug 14 '14 at 16:42

score 46 · Accepted Answer · edited Jan 08 '19 at 22:28

46

Is this what you're looking for?

.outer {
    width: 500px;
    height: 100px;
    white-space: nowrap;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.outer div {
    width: 24.5%;
    background-color: #eee;
    float: none;
    height: 90%;
    margin: 0 0.25%;
    display: inline-block;
    zoom: 1;
}

<div class="outer">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

edited Jan 08 '19 at 22:28

Gark Garcia

450
6
14

answered Aug 14 '14 at 17:06

John_C

1,116
8
17

WooooooW!This is exactly what I want. Please @John_C will it be possible for me to style the Scroll bar? I am try to inspect it on the browser but I can't get the DOM that is showing scroller – Paullo Aug 14 '14 at 17:09
Styling the scrollbar is a separate issue. See here for example: http://stackoverflow.com/questions/7713599/styling-an-inner-scrollbar-like-the-twitter-conversation-interface/7713784#7713784 – John_C Aug 14 '14 at 17:17
Yes I know, I will follow up with post. Thanks once again – Paullo Aug 14 '14 at 17:22

score 7 · Answer 2 · edited Aug 14 '14 at 16:47

7

You can solve this my manipulating the css white-space property

.x-scroller {
    overflow-x: scroll;
    overflow-y:hidden;
    width: 300px;
    white-space: nowrap
}

FIDDLE DEMO

edited Aug 14 '14 at 16:47

Earth

3,477
6
37
78

answered Aug 14 '14 at 16:39

Le_Morri

1,619
14
18

1

also, if you add "-webkit-overflow-scrolling: touch" it gives the scroller a native bounce effect in apple devices. – John_C Aug 14 '14 at 16:44
The containing div has a definite height. This currently forces the contains to occupy only but one line. It doesn't address my issue – Paullo Aug 14 '14 at 16:45
I can have up to 10 divs (with class x-scroller), each of these divs will occupy a row. But I want there contents to be horizontally scroll-able – Paullo Aug 14 '14 at 16:50
I have Updated my post with an image to help explain what i intend to achieve – Paullo Aug 14 '14 at 16:59

Zato · Answer 3 · 2014-08-14T16:56:18.517

4

You can solve this by adding the display property to inline-block. Fiddle Demo

.x-scroller{
    overflow-x: scroll; 
    overflow-y: hidden; 
    height: 100px; 
    width: 300px;
    display: inline-block;
    white-space: nowrap
}

edited Aug 14 '14 at 16:56

answered Aug 14 '14 at 16:44

Zato

149
4

score 1 · Answer 4 · edited Aug 14 '14 at 17:04

1

This splits the text into two long horizontal lines, but looks less than desirable given the current text.

.x-scroller{
    overflow-x: scroll; 
    overflow-y: hidden; 
    height:100px; 
    width: 300px;
    white-space: pre;
}

edited Aug 14 '14 at 17:04

Zato

149
4

answered Aug 14 '14 at 16:59

Panda_Claus

103
9

How can I make a div scroll horizontally

4 Answers4