如何连续自动上下滚动div答案

【问题标题】：how to scroll automatically up and down a div continuously如何连续自动上下滚动div
【发布时间】：2018-06-21 12:13:05
【问题描述】：

我正在处理 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，而不是从下到上滚动。我也想连续上下滚动。我怎样才能做到这一点？

【问题讨论】：

我在你的代码 sn-p 中看不到 DIV 吗？
已经提到了，见刚才提到的脚本底部。

标签： javascript jquery html css scroll

【解决方案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>

【讨论】：