How to disable scrolling until animation is complete?

Question

I am using this code to scroll to a certain element on my page:

$("html, body").animate({scrollTop: $(".myDiv").offset().top}, 300);

It works, but there is one issue with it: When the user scrolls down while the script scrolls up, there is some juddering because there are two scroll commands at the same time in different directions - sounds logical to me.

I checked some other sites with such scroll functionality, there is no juddering. So what's the trick to prevent this?

on which event are you using this: $("html, body").animate({scrollTop: $(".myDiv").offset().top}, 300); can you explain more please. — Barlas Apaydin, Jul 25 '12 at 12:32
I use it on click, like `$("somehting").click(function() { ... });` — Sven, Jul 25 '12 at 12:40
come plz http://chat.stackoverflow.com/rooms/14079/fast-solution — Barlas Apaydin, Jul 25 '12 at 12:41

score 13 · Accepted Answer · edited May 23 '17 at 12:01

13

Thats a jQuery bug when you use animate with scrolling, good detection.

I did a research how to turn it off scrolling and find this question : How to disable scrolling temporarily?

Here is jsFiddle. You will see after click; user cant scroll untill animate complete.

$('.myDiv').click(function(){

    disable_scroll();

    $('html, body').stop().animate({ scrollTop: 0 }, 700,function() {
        enable_scroll();
    });
});

edit: thanks to galambalazs btw.

edited May 23 '17 at 12:01

Community

1
1

answered Jul 25 '12 at 12:27

Barlas Apaydin

6,794
10
50
81

1

Thanks for pointing me to galambalazs' answer. If anyone else ends up here, I've refactored his solution into a nice self-contained object: http://stackoverflow.com/a/21533631/940252 – Josh Harrison Feb 03 '14 at 17:27

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

an idea - try hooking to the scroll event and use http://api.jquery.com/stop/ to stop your animation .. bad idea..

same problem with a solution - let user scrolling stop jquery animation of scrolltop?

edited May 23 '17 at 12:01

Community

1
1

answered Jul 25 '12 at 12:18

Avi Pinto

4,086
2
22
21

How to disable scrolling until animation is complete?

2 Answers2

Linked