Skip to content
This repository has been archived by the owner on Jan 24, 2018. It is now read-only.

Prevent jumpiness in scrolling animation if user scrolls manually at the same time. #55

Closed
wants to merge 1 commit into from

Conversation

lennym
Copy link

@lennym lennym commented Aug 14, 2012

Scrolling rapidly whilst animating can cause animation loop to try to
move in opposite direction to scroll, causing an ugly jumping effect -
particularly noticable with momentum scrolling on OSX.

Now animations correct themselves when the user scrolls during an
animation.

Scrolling rapidly whilst animating can cause animation loop to try to
jump in opposite direction to scroll, causing an ugly jumping effect -
particularly noticable with momentum scrolling on OSX.
Now animations correct themselves when the user scrolls during an
animation.
@Prinzhorn
Copy link
Owner

Thanks. I will try this out later.

But I fear that it's only working nice for the snapping demo, because the animation is short. What if say I animate a very long page from 0 to 10000. You can't jump out of this large range even with heavy mouse and keyboard action.

But your code inspired me:
There rather should be a check if the _curTop is where skrollr left it at (the _scrollAnimation object needs another property lastTop). This way we can easily tell that the user scrolled, even if it was 1px and then follow your approach to start a new animation at this position.

@Prinzhorn
Copy link
Owner

One more thing: this is probably highly related to #51.

@lennym
Copy link
Author

lennym commented Aug 14, 2012

That's pretty much exactly what I did, the only difference is that I allowed small deviations in the same direction as the animation to continue unchanged (not doing this caused OSX momentum scrolling to cause issues, as the page continues scrolling slowly for a short time). The line https://github.com/Prinzhorn/skrollr/pull/55/files#L0R559 checks that the current position is either where we left it, or a short distance in the direction we're animating.

Short (as in short duration) animations were actually working OK before, because the animation speed was higher than the likely scroll speed. It was the long, slow animations, coupled with fast scrolling (drag scrollbar or hold PgDn for example) where each frame the animation would try and "undo" some of the manual scrolling that this resolves.

@Prinzhorn
Copy link
Owner

I see, I misunderstood the comment above this line then.

@Prinzhorn
Copy link
Owner

I just took a quick look at your fork locally. There's some jumpy behavior for me in Chromium on Ubuntu, worse than before. But I don't have time now to try anything more.

@lennym
Copy link
Author

lennym commented Aug 15, 2012

Suspect you might be right then that this is vaguely related to #51 in that the behaviour is heavily dependent on how the browser reacts to UI initiated scrolling, and whether it's done discretely or continuously. Hence it works nicely on a Mac with continuous scrolling, but "fails" on Ubuntu, where I'm guessing the scrolling bevaviour is discrete(?).

Unfortunately, I think this might be a hard problem to solve.

@Prinzhorn
Copy link
Owner

This is not only a OS problem. Firefox on Ubuntu for example works perfectly well, because since Firefox 13 there's "smooth scrolling". So when I scroll, Firefox doesn't jump to that position but interpolates from current to new position.

It's too bad there's no consistent way of preventing user scrolling. Even overflow:hidden doesn't stop Page Up/Down buttons. I don't think catching all user events (DOMMouseScroll, onmousewhell, onkeydown, etc.) would be a sufficient solution either.

@Prinzhorn
Copy link
Owner

Trying to light this up, please follow instructions:

Does this jump as well? If not, I'll try to figure out what jQuery does different when animating the scroll position.

@Prinzhorn
Copy link
Owner

Closing due to inactivity. I'm not sure if this can be fixed by skrollr anyway. Feel free to open a new ticket.

@Prinzhorn Prinzhorn closed this Sep 18, 2012
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants