jquery 如何自动上下滚动div

xxb16uws  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(106)

我在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,而不是从下到上。我还想不断地上下滚动。我如何才能做到这一点?

o4hqfura

o4hqfura1#

它可以简单地通过存储您移动的方向并在到达顶部/底部时切换来完成。检查是否需要切换的最简单方法是查看自上次迭代以来位置是否实际发生了变化。
如果您试图通过传递一个太小或太大的数字来滚动到一个位置,该位置将分别设置为顶部或底部。在这种情况下,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>

相关问题