javascript - 将元素连续滚动到父元素的底部并返回到父元素的顶部

Question

我正在尝试自动 .animate .scrollTop的 <div> 包含在另一个<div> 。我这样做是为了隐藏滚动条，从而只显示文本。因此，我知道如何滚动那个特定的 <div>与 JQuery 一样:

$("#div").animate({ scrollTop: "+=5" }, 200);

但我想做的是持续 .animate内容直到到达该特定 <div> 的底部然后动画回到 <div> 的顶部(.scrollTop: '0px')。这就是我挣扎的地方。

• 我目前正在将内容拉入 <div>结果是 询问。因此，我不知道内容的全长 将放置那个 <div> .

• <div>包含内容的内容在另一个 <div> 中我不认为检测 <div> 底部的方法工作正常(或者我做错了什么)。

  var div = $(this);
  if (div[0].scrollHeight - div.scrollTop() == div.height())
  

我想知道是否有人可以帮助我解决这个问题。因为我没有在这个论坛或 Google 上看到过这样的特定方法。

我所拥有的几乎就是这个:

if ($('#resultProviders').scrollTop() >= $('#resultProviders').innerHeight()) {
    $('#resultProviders').animate({ scrollTop: "0px" }, 800);
} else {
$('#resultProviders').animate({scrollTop: '+=30px'}, 500);
};

我还提供了一个 Fiddle为此。

https://jsfiddle.net/trinkermedia/ebhydbp3/5/

非常感谢。

Answer 1

我将使用带有参数的滚动函数，如 fiddle 中所示.

function _scroll(goDown) {
    goDown = goDown == undefined ? true: goDown;
    var frame = $('#resultProviders'),
        content = $('#resultProviders ul'),
        scrollTo;
    if (goDown) {
        scrollTo = content.outerHeight() - frame.outerHeight();
    } else {
        scrollTo = 0
    }
    frame.animate({
        scrollTop: scrollTo
    }, {
        duration: 2000,
        complete: function() {_scroll(!goDown)}
    });
}