Question

所以继承人应该可滚动的div的css

.form-holder{
        padding-left: 20px;
        width: auto;
        background: ;
        overflow: auto;
        max-height: 300px;
        padding-bottom: 30px;

    }

每次我上传图片预览都可用，我希望这些图片不是垂直水平查看。所以我希望div可以从左到右滚动

继承人：http://jsfiddle.net/roowako/AZvuL/

Answer 1

使用jQuery和Mouse Wheel Plugin在想要水平滚动的div上绑定mousewheel事件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
$(document).ready(function() {
$('#divId').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 30);
    e.preventDefault();
});
});
</script>

您可以更改数字乘以delta（在我的示例中为30），以设置每次滚动时移动的像素数。

Answer 2

我假设这是你想要创造的：

<强> FIDDLE

HTML：

<div class="form-holder">
    <div class="img_wrap">
        <img src="http://lorempixel.com/output/nature-q-c-280-280-4.jpg" />
        <img src="http://lorempixel.com/output/sports-q-c-280-280-2.jpg" />
        <img src="http://lorempixel.com/output/city-q-c-280-280-9.jpg" />
        <img src="http://lorempixel.com/output/fashion-q-c-280-280-1.jpg" />
    </div>
</div>

CSS：

.form-holder {
    padding-left: 20px;
    width: 300px;
    background: grey;
    overflow: auto;
    max-height: 300px;
    padding-bottom: 30px;
}
.img_wrap {
    width: 1120px;  /*width of all images */
}
.form-holder img {
    float:left;
}

Answer 3

如果要水平滚动

，请限制div的width

.form-holder{
        padding-left: 20px;
        width: 300px;
        background: ;
        overflow: auto;
        max-height: 300px;
        padding-bottom: 30px;

    }

Answer 4

小提琴：http://jsfiddle.net/s6AsC/

您必须限制尺寸并将overflow-x设置为auto

.form-holder{
        padding-left: 20px;
        height: 300px; /* if you want to set the height */
        width: 300px;
        background: ;
        overflow-y: hidden;
        overflow-x: auto;
        max-height: 300px;
        padding-bottom: 30px;

    }

如何使div从左向右滚动

4 个答案: