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

Question

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

$("#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)}
    });
}

Answer 2

GSAP, here is your fiddle: jsFiddle.

事情变得如此简单

JavaScript:

TweenMax.to('#resultProviders', 2, { scrollTo: { y: 'max' }, repeat: -1, yoyo: true, ease: Power2.easeInOut });

抱歉，如果这不是您要找的，或者如果您对使用 jQuery 以外的任何其他方法的解决方案不感兴趣。

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

Continuously scroll an element to bottom and back to top of a parent element

javascript

css

jquery

scrolltop

jquery-animate