search

some-react-components / react-scrollchor

A React component for scroll to `#hash` links with smooth animations
ISC License
149 stars 24 forks source link

Scrollbar jumps back and forth #25

Closed xehpuk closed 6 years ago

xehpuk commented 6 years ago

The scrollbar often jumps back and forth before starting the animation.

This is best explained in a short video: react-scrollchor.mp4

bySabi commented 6 years ago

@xehpuk sorry! I don't get it

xehpuk commented 6 years ago

There you go, with 5 fps:

react-scrollchor

As you can see, the scrollbar jumps to the top of the page for one frame.

bySabi commented 6 years ago

In the example "Home" Scrollchor has to set to "", that's why, in this case, scroll jump to the top of the page. Just like will do <a href="" ...

xehpuk commented 6 years ago

It jumps to the top before scrolling from bottom to top.

bySabi commented 6 years ago

@xehpuk I still don't see the behaviour that you describe. Maybe is relate to your browser or default animation function, easeOutQuad

bySabi commented 6 years ago

Finally I see it! I will investigate it. Any help on is welcome.

bySabi commented 6 years ago

The example in localhost works well Maybe is relate to github gh-pages hosting. I had to tweak the example a little for deploy on gh-pages

Can you test it in your own server?

bySabi commented 6 years ago

I will close this for now.

Please, reopen it if needed.

sohbr commented 6 years ago

Hello. This issue still seems unresolved. There is a split second flash of where it should scroll to before it actually begins scrolling.

bySabi commented 6 years ago

@sohbr in what browser do you tested?

sohbr commented 6 years ago

This was in Chrome.

On Wed, May 2, 2018, 8:14 AM bySabi Files notifications@github.com wrote:

@sohbr https://github.com/sohbr in what browser do you tested?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/bySabi/react-scrollchor/issues/25#issuecomment-386013745, or mute the thread https://github.com/notifications/unsubscribe-auth/ARRHtUVCV654BW53-POqVnMzyJPphAe6ks5tuc1wgaJpZM4S4fxz .

sohbr commented 6 years ago

I also used different easing functions and it produced the same effects.

bySabi commented 6 years ago

Maybe is related to this: https://github.com/bySabi/react-scrollchor/issues/30 , do you set some offset value on animate prop??