CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3094719
user3094719

Reputation: 297

Scroll horizontally instead of vertically in certain div with images?

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?

Upvotes: 2

Views: 6927

Answers (3)

Birrel
Birrel

Reputation: 4834

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

Upvotes: 5

Francisco Corrales Morales
Francisco Corrales Morales

Reputation: 3834

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>

Upvotes: 1

Anastasios Vlasopoulos
Anastasios Vlasopoulos

Reputation: 1802

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

Upvotes: 0

Related Questions