auto scroll stop on hover

I have an auto scrolling featured section on the sidebar of a site. using scrollTop and animate to move it up and down. I need it to stop on hover but can't quite get it to work.

function scrollDown(el) {
    el.animate({
        scrollTop: el[0].scrollHeight
    }, 25000, function() {
        scrollUp(el)
    });
}

function scrollUp(el) {
    el.animate({
        scrollTop: 0
    }, 25000, function() {
        scrollDown(el);
    });
}

scrollDown($("#scroll-featured"));

any thoughts?

simondavies

9 years ago

Level 26

whats the code you tried to use for the hover?

tlatenchi

9 years ago

Level 3

Can you create a codepen demo page?

jbowman99

9 years ago

Level 7

@simondavies and @tlatenchi

took a different approach, Now it stops on hover.

function scrollDown(el){

    this.times = 0;
    this.moveInter = 0;
    this.backInter = 0;
    var scrl=this;
    el.hover(function(){
        clearInterval(scrl.moveInter);
    },function(){
        scrl.move();
    });
    this.moveBack = function () {

        var self = this;
        clearInterval(this.moveInter);
        this.backInter = setInterval(function () {
            self.times -= 5;
            el.scrollTop(self.times);
            if (self.times == 0) {
                return self.startMove();
            }
        }, 1);
    }

    this.move = function() {

        var self = this;
        this.moveInter = setInterval(function () {
            self.times++;
            el.scrollTop(self.times);
            if (self.times == 1200) {
                return self.moveBack();
            }
        }, 50);
    }

    this.startMove = function() {
        this.times = 0;
        var self = this;
        if (this.backInter != null) {
            clearInterval(this.backInter);
        }
        window.setTimeout(function () {
            self.move();
        }, 1000);
    }
}
jQuery('#scroll-featured').each(function () {
    el = jQuery(this);
    var scroller = new scrollDown(el);
    scroller.startMove();

});

Please or to participate in this conversation.