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

【问题标题】：Scroll horizontally instead of vertically in certain div with images?在带有图像的某些 div 中水平滚动而不是垂直滚动？
【发布时间】：2023-04-04 06:35:01
【问题描述】：

我尝试了很多在网上找到的解决方案。没有工作。当我垂直滚动时，我试图让网站水平滚动。我试图通过 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>

怎么了？ / 我能做什么？

【问题讨论】：

你能提供一个 JSFiddle 吗？
什么意思？你可以只复制上面的吗？
似乎重复：stackoverflow.com/questions/2346958/…
提示：如果您使用适当的缩进，我们实际上可能会阅读您问题中的代码。 :)
那么，你成功了吗？哪种解决方案适合您？

标签： javascript jquery html css

【解决方案1】：

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

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

HTML：

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

当您滚动时，您实际上是在 #b 内左右移动 .img_holder。此方法要求.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。您可以选择任何您想要调整滚动速度的值。

如果你想隐藏水平滚动条也很好用：

#b {
    overflow-x:hidden:
}

如图here

【讨论】：

并且它不需要包含任何外部JS文件，除了JQuery。
太棒了！，你能不能：把它放一个滑块？，你让内容更大？
This fiddle 有一个滑块，this 一个没有。 Here 是其中包含较大图像的一种。确保增加所有div的大小，尤其是.img_holder的宽度

【解决方案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>

【讨论】：

我很困惑。这个例子对我不起作用？！（使用 iceweasel/firefox。）
这基本上奏效了！但我使用 jquery.mousewheel.js 而不是 jquery.mousewheel.min.js
此方法不适用于我的系统。该解决方案不应依赖于浏览器。 “试用 Chrome”不是解决方案 - 您不能要求网站的所有查看者都下载新浏览器，以便网站正常运行。有关独立于浏览器的完整解决方案，请参阅我的答案。
这不是独立于浏览器的。但是，使用 jquery.mousewheel.js 代替了它。

【解决方案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;
 }

【讨论】：