I have this code that scrolls the page automatically and stops the animation when the user interacts with the page. THis working properly on desktop devices but not on iphone. When the user try to scroll the page with his finger the animation doesn't stop until reach the bottom of the page. What can i do for this? Thanks!

$("html,body").stop().animate({scrollTop: $(document).height()}, 2000);

// Stop the animation if the user scrolls. Defaults on .stop() should be fine
$("body,html").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    $("html,body").stop();
});  

I have this code that scrolls the page automatically and stops the animation when the user interacts with the page. THis working properly on desktop devices but not on iphone. When the user try to scroll the page with his finger the animation doesn't stop until reach the bottom of the page. What can i do for this? Thanks!

$("html,body").stop().animate({scrollTop: $(document).height()}, 2000);

// Stop the animation if the user scrolls. Defaults on .stop() should be fine
$("body,html").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    $("html,body").stop();
});  

• javascript
• jquery
• html
• scroll
• jquery-animate

Share Improve this question Follow asked Jun 15, 2013 at 9:22 GeorgeGeorge 29555 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I add this in the bind area and it works "touchstart touchmove"

$("body,html").bind("touchstart touchmove scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    $("html,body").stop();
});  

If you need only to detect it once, you can use

$("body,html").one("touchstart touchmove scroll mousemove mousedown DOMMouseScroll mousewheel keyup", function(e){
    console.log('Detected');
});