CODEWITHSUNDEEP
javascriptjqueryanimationscrolloverriding
Rotem
Rotem

Reputation: 38

automatic scroll animation disables user scrolling - ability to override it

i want to make a website that is scrolled very very slowly to the bottom all the time. 

var docEnd= $(document).height();
$('html,body').stop(true,false).animate({scrollTop:docEnd}, 1200000,'linear');

the problem is that it is disables user scrolling.
and the scroll event lisetener do not distinguish between the animation and the user scrolling.

i need to make the user be able to override it:
web is auto scroll to bottom --> the user will scroll --> the animation stops and the user scrolls wherever he wnats --> when he finishes the animation returns.

thanks a lot in advance !
Rotem.

Upvotes: 2

Views: 115

Answers (1)

shaN
shaN

Reputation: 828

var doc=$('html,body');
var docEnd= doc.height();

doc.animate({scrollTop:docEnd}, 120000,'linear');

$(window).scroll($.debounce( 250, true, function(){
    console.log("scrolling");
    doc.clearQueue();
    doc.stop();
} ) );

$(window).scroll($.debounce( 250, function(){
    console.log("done");
    doc.animate({scrollTop:docEnd}, 120000,'linear');
} ) );

here is the demo for the code above

It uses debounce plugin for checking if scrolling or not. While scrolling clear the queue and stops the autoscroll

Upvotes: 1

Related Questions