Question

我正在html页面上工作，其中有一个名为divContainer的div。我想自动连续上下滚动此div。为此，我使用了以下代码：

$(document).ready(function() {
  var interval = setInterval(function() {
    if ($("#divContainer").scrollTop() != $('#divContainer')[0].scrollHeight) {
      $("#divContainer").scrollTop($("#divContainer").scrollTop() + 10);
    } else {
      clearInterval(interval);
    }
  }, 100);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="divContainer" style="height:950px;overflow:auto"></div>

但是，此代码将div从顶部滚动到底部，而不是从底部滚动到顶部。我也想连续上下滚动。我该如何实现？

Answer 1

只需存储您要移动的方向并在到达顶部/底部时切换即可完成。检查是否需要切换的最简单方法是查看自上次迭代以来位置是否确实发生了变化。

如果尝试通过传递的数字太小或太小而滚动到某个位置，则该位置将分别设置在顶部或底部。在这种情况下，scrollTop()将返回与以前相同的数字，我们将知道该切换方向了。

var up = false;
var lastPosition;

var interval = setInterval(function () {
    var $container = $("#divContainer");
    var position = $container.scrollTop();
    var height = $container[0].scrollHeight;

    // If we haven't moved, switch direction
    if(position === lastPosition) up = !up;
    lastPosition = position;

    if (up) {
        // Going up
        $container.scrollTop(position - 10);
    } else {
        // Going down
        $container.scrollTop(position + 10);
    }
}, 100);

div {
    border: 1px solid red;
    width: 200px;
    height: 200px;
    overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divContainer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

如何连续不断地上下滚动div

1 个答案: