Question

我尝试了很多我在网上找到的解决方案。没有用。当我垂直滚动时，我正试图让网站水平滚动。我试图通过js实现这一点 - 没有。然后我读到我应该能够使用css来做到这一点。再一次 - 没什么。这是现在的代码：

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

有什么问题？ /我该怎么办？

Answer 1

所选答案在我的浏览器（FireFox）中不起作用。

Here是一个我已经很好地工作的解决方案。

<强> HTML：

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

滚动时，您实际上是在.img_holder内左右移动#b。此方法要求.img_holder与放置在其中的图像的总和（以及所有填充和边距）一样宽（或更宽）。 #b是要在页面上查看的所需宽度。

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

确保使用条件停止滚动低于零且高于容器的最大宽度（代码底部附近的if条件）。此外，滚动时的delta值非常小，因此为了防止用户必须滚动一堆我将它乘以20.您可以选择任何您想要调整滚动速度的值。 / p>

如果你想隐藏水平滚动条，也可以很好地工作：

#b {
    overflow-x:hidden:
}

如图所示here

Answer 2

以下是您的需求：

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

代码：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

尝试类似这样的事情：

.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 个答案: