Javascript 在带有图像的特定div中水平滚动而不是垂直滚动？_Javascript_Jquery_Html_Css

Javascript 在带有图像的特定div中水平滚动而不是垂直滚动？

javascript jquery html css

Javascript 在带有图像的特定div中水平滚动而不是垂直滚动？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我尝试了许多在网上找到的解决方案。没有一个奏效。当我垂直滚动时，我试图使网站水平滚动。我试图通过js实现这一点——什么都没有。然后我读到，我应该能够做到这一点，简单地使用css。再说一遍，没什么。以下是目前的代码： <style type="text/css"> #b { width:100%; height:100vh; white-space:nowrap; position:fixed; left:0; top:0; fo

我尝试了许多在网上找到的解决方案。没有一个奏效。当我垂直滚动时，我试图使网站水平滚动。我试图通过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>


#b{
宽度：100%；
高度：100vh；
空白：nowrap；
位置：固定；
左：0；
排名：0；
字号：0；
溢出-x：自动；
}
#b img{
宽度：自动；
身高：100%；
}

怎么了我能做什么？

试试这样的：

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

以下是您需要的：

例如：

代码：

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

这是一个解决方案，我已经很好地工作了

HTML:

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

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

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

JavaScript:

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

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

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

如图所示，您能提供一个JSFIDLE吗？您的意思是什么？您可以复制上面的内容吗？似乎是重复的：提示：如果您使用适当的缩进，我们实际上可能会阅读您问题中的代码。：）那么，你成功了吗？哪种解决方案适合你？我很困惑。这个例子不适合我？！（使用iceweasel/firefox）这基本上奏效了！但是我没有使用jquery.mousewheel.min.js，而是使用jquery.mousewheel.js。这种方法在我的系统上不起作用。解决方案不应依赖于浏览器。“试用Chrome”不是一个解决方案——你不能要求网站的所有浏览者下载一个新的浏览器，这样网站才能正常工作。有关独立于浏览器的完整解决方案，请参阅我的答案。这不是独立于浏览器的。但是，使用jquery.mousewheel.js就可以了。而且除了jquery之外，它不需要包含任何外部js文件。太好了！，你能不能：把它放在一个滑块上？你能把内容放大吗？小提琴有滑块，一个没有。是一个有更大的图像在里面。确保增大所有div的尺寸，尤其是

.img\u支架的宽度