如何连续自动上下滚动div

Question

我正在处理 html 页面，其中有一个名为divContainer. 我想自动连续上下滚动这个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>