在图像的某些div中水平滚动而不是垂直滚动？

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. 我试图通过js完成此操作-没什么。 Then I read that I should be able to do this simply using css. 然后我读到我应该能够简单地使用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? / 我能做什么？

Answer 1

The selected answer doesn't work in my browser (FireFox). 所选答案在我的浏览器（FireFox）中不起作用。

Here is a solution I've gotten to work pretty nicely. 这是我必须很好地工作的解决方案。

HTML: 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 . 滚动时，实际上是在#b内左右移动.img_holder 。 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. 此方法要求.img_holder的宽度（或宽度）要大于将要放置在其中的图像之和以及所有填充和边距的宽度。 #b is the desired width to be viewed on the page. #b是要在页面上查看的所需宽度。

CSS: 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: 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). 确保使用条件阻止滚动到零以下和容器的最大宽度之上（ if条件接近代码底部）。 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. 另外，滚动时的delta值很小，因此为防止用户不得不滚动一堆，我将其乘以20。您可以选择任何要调整滚动速度的值。

Also works nicely if you want to hide the horizontal Scroll Bar: 如果要隐藏水平滚动条，也可以很好地工作：

#b {
    overflow-x:hidden:
}

As shown here 如图所示这里

Answer 2

Here is what you need: 这是您需要的：

Example: http://css-tricks.com/examples/HorzScrolling/ 范例： http : //css-tricks.com/examples/HorzScrolling/

Code: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/ 代码： 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>

Answer 3

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

在图像的某些div中水平滚动而不是垂直滚动？

问题描述

3 个解决方案

解决方案1
5 2014-01-20 00:06:20

解决方案2
1 2014-01-19 22:55:21

解决方案3
0 2014-01-19 22:38:36

在图像的某些div中水平滚动而不是垂直滚动？

问题描述

3 个解决方案

解决方案1 5 2014-01-20 00:06:20

解决方案2 1 2014-01-19 22:55:21

解决方案3 0 2014-01-19 22:38:36

解决方案1
5 2014-01-20 00:06:20

解决方案2
1 2014-01-19 22:55:21

解决方案3
0 2014-01-19 22:38:36