Scroll horizontally instead of vertically in certain div with images?

Question

I tried many solutions I found on the web. None worked. I'm trying to make a website scroll horizontally when I'm scrolling vertically. I tried to accomplish this via js - nothing. Then I read that I should be able to do this simply using css. Again - nothing. Here's the code as it is right now:

<style type="text/css">
#b {
    width:100%;
    height:100vh;
    white-space:nowrap;
    position:fixed;
    left:0;
    top:0;
    font-size:0;
    overflow-x:auto;
}
#b img {
    width:auto;
    height:100%;
}
</style>
</head>
<body>
    <div id="b">
        <img src="a.jpg"/>
        <img src="b.jpg"/>
    </div>
</body>

What is wrong? / What can I do?

seems duplicate: http://stackoverflow.com/questions/2346958/how-to-do-a-horizontal-scroll-on-mouse-wheel-scroll — Francisco Corrales Morales, Jan 19 '14 at 22:56
Tip: If you use proper indentation, we might actually read the code in your question. :) — Christian, Jan 20 '14 at 00:11

Birrel · Answer 1 · 2014-01-20T00:48:27.057

The selected answer doesn't work in my browser (FireFox).

Here is a solution I've gotten to work pretty nicely.

HTML:

<body>
    <div id="b">
        <div class="img_holder">
            <img/>
            <img/>
            <img/>
            <img/>
            <img/>
            <img/>
            <img/>
            <img/>
        </div>
    </div>
</body>

When you scroll, you are essentially moving .img_holder left and right within #b. This method requires that .img_holder is as wide (or wider) than the sum of the images you'll be placing in it, as well as all the padding and margins. #b is the desired width to be viewed on the page.

CSS:

#b {
    width: 400px;
    border: 1px solid #111;
    padding: 0px;
    margin: 0px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.img_holder {
    padding: 0px;
    margin: 0px;
    height: 100px;
    width: 910px;
}
img {
    height: 90px;
    width: 100px;
    padding: 5px;
    background: #123;
    display: inline-block;
}

JavaScript:

var scroller = {};
scroller.e = document.getElementById("b");

if (scroller.e.addEventListener) {
    scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
    scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {

    // cross-browser wheel delta
    var e = window.event || e;
    var delta = - 20 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));

    var pst = $('#b').scrollLeft() + delta;

    if (pst < 0) {
        pst = 0;
    } else if (pst > $('.img_holder').width()) {
        pst = $('.img_holder').width();
    }

    $('#b').scrollLeft(pst);

    return false;
}

Make sure that you use conditions to stop from scrolling below zero and above the max width of the container (if conditions near bottom of code). Also, the delta value when scrolling is very small, and so to prevent the user from having to scroll a bunch I've multiplied it by 20. You can choose any value you'd like to adjust scrolling speed.

Also works nicely if you want to hide the horizontal Scroll Bar:

#b {
    overflow-x:hidden:
}

As shown here

And it doesn't require any external JS files to be included, other than JQuery. — Birrel, Jan 20 '14 at 00:09
Great!, can you please: put it a slider ?, and you make the content bigger? — Francisco Corrales Morales, Jan 20 '14 at 02:09
[This](http://jsfiddle.net/ye259/4/) fiddle has a slider, [this](http://jsfiddle.net/ye259/5/) one doesn't. [Here](http://jsfiddle.net/ye259/6/) is one with larger images within. Make sure to increase the size of all the divs, especially the width of `.img_holder` — Birrel, Jan 20 '14 at 02:18

score 1 · Answer 2 · edited Jan 20 '14 at 00:12

1

Here is what you need:

Example: http://css-tricks.com/examples/HorzScrolling/

Code: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);

      event.preventDefault();

   });

})

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

edited Jan 20 '14 at 00:12

Christian

27,509
17
111
155

answered Jan 19 '14 at 22:55

Francisco Corrales Morales

3,676
1
37
64

1

I'm puzzled. The example doesn't work for me?! (Using iceweasel/firefox.) – user3094719 Jan 19 '14 at 23:01
This basically worked! But instead of jquery.mousewheel.min.js I used jquery.mousewheel.js – user3094719 Jan 19 '14 at 23:46
This method doesn't work on my system. The solution shouldn't be browser-dependent. "Try Chrome" is not a solution - you can't ask all the viewers of your site to download a new browser just so the site works properly. Refer to my answer for a complete solution that is browser-independent. – Birrel Jan 20 '14 at 00:19
This wasn't browser-independent. However, using jquery.mousewheel.js instead made it. – user3094719 Jan 20 '14 at 01:03

score 0 · Answer 3 · answered Jan 19 '14 at 22:38

Try something like this one:

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

Scroll horizontally instead of vertically in certain div with images?

3 Answers3

Linked