javascript - 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 acplish 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?

<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?

Share Improve this question edited Jan 20, 2014 at 0:11 Christian 28.2k17 gold badges116 silver badges159 bronze badges asked Jan 19, 2014 at 22:28 user3094719 2975 silver badges16 bronze badges

can you provide a JSFiddle ? – Francisco Corrales Morales Commented Jan 19, 2014 at 22:43
What do you mean? You may just copy the above? – user3094719 Commented Jan 19, 2014 at 22:50
seems duplicate: stackoverflow./questions/2346958/… – Francisco Corrales Morales Commented Jan 19, 2014 at 22:56
Tip: If you use proper indentation, we might actually read the code in your question. :) – Christian Commented Jan 20, 2014 at 0:11
so, did you make it work ? which solution work for you ? – Francisco Corrales Morales Commented Jan 22, 2014 at 23:21

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

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

Here is what you need:

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

Code: http://css-tricks./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./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>

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742343251a4426042.html

javascript - Scroll horizontally instead of vertically in certain div with images? - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Scroll horizontally instead of vertically in certain div with images? - Stack Overflow

3 Answers 3

相关推荐