Question

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

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

但我要做的是持续 .animate内容，直到它达到特定<div>的底部，然后动画回到<div>的顶部{1}}（.scrollTop: '0px'）。这就是我正在努力的地方。

我目前正在将内容提取到<div>，这是一个结果查询。因此，我不知道内容的全长将放置<div>。

包含内容的<div>位于另一个<div>内，我认为检测<div>底部的方法无法正常工作（或者我可能是做错事。）

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

我想知道是否有人可以帮我解决这个问题。因为我没有在这个论坛中看到过这样的特定方法，也没有通过谷歌来看它。

我所拥有的就是这个：

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 这么简单，这是你的小提琴： jsFiddle 。

<强> JavaScript的：

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

道歉，如果你不是在寻找，或者你对利用jQuery以外的任何其他解决方案不感兴趣。

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

2 个答案: