连续滚动元素到父元素的底部和顶部

Question

I am trying to automatically .animate the .scrollTop of a <div> contained within another <div> . I have done this so I could hide the scroll-bar thus only display the text. Therefore, I know how to scroll that particular <div> with JQuery as such:

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

But what I am trying to do is to continuously .animate the content until it reaches the bottom of that particular <div> and then animates back to the top of the <div> ( .scrollTop: '0px' ). THere is where I am struggling with.

• I am currently pulling content into a <div> which the result of a query. Therefore, I do not know the full length of the content that will be placed of that <div> .

• The <div> that contains the content is within another <div> and I don't think the method to detect the bottom of the <div> works correctly (or perhaps I am doing something wrong).

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

I was wondering if someone can give me a hand with this. Since I have not seen a particular approach like this in this forum or by Googleing for it.

So pretty much what I have is this:

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

I have also provided a Fiddle for this.

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

Many thanks.

Answer 1

I'd use a scroll function with a parameter, like shown in this 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

Things are so simple with GSAP , here is your fiddle: jsFiddle .

JavaScript:

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

Apologies if this wasn't you were looking for or if you were not interested in solutions utilising anything else other than jQuery.