Question

我的滚动条与正常配置完美配合。

#makeMeScrollable{
  width:100%;
  height: 500px;
  position:absolute;
  left:0;
  top:110px;
}

#makeMeScrollable div.scrollableArea img{
  position: relative;
  float: left;
  margin: 0 5px 0 0;
  padding: 0; 
}

但是当窗口高度小于768px时，我在CSS中进行了以下更改：

@media only screen and (max-height : 768px) {
    #makeMeScrollable{
      height: 500px;
    }

    #makeMeScrollable div.scrollableArea img{
        height: 400px
    }
}

在Chrome上正常运行，但在Firefox和IE上，最后一张图片显示在底线。

Answer 1

如果使用填充而不是边距更改图像的CSS会发生什么？像这样：

#makeMeScrollable div.scrollableArea img{
  position: relative;
  float: left;
  margin: 0;
  padding: 0 5px 0 0; 
}

过去，这对我有用。

Answer 2

好的，我解决了这个问题：

$(document).ready(function () {
            $("#makeMeScrollable").smoothDivScroll({                 
            manualContinuousScrolling: false,
            autoScrollingMode: "onStart",
            autoScrollingDirection: "backAndForth",
            autoScrollingStep: 1
        });
    });

这是第一个初始化它的脚本。我希望这些图像来回传播。

我这样做了，现在我的问题解决了：

$(document).ready(function () {
        $("#makeMeScrollable").smoothDivScroll({                 
            manualContinuousScrolling: true,
            autoScrollingMode: "onStart",
            autoScrollingStep: 1
        });
    });

平滑div滚动：最后一张图片落到底线

2 个答案: