cferdinandi/smooth-scroll

Why does smooth scroll flash before scrolling?

Closed this issue · 3 comments

I am building a form that will automatically scroll to the input that needs to be filled.
If the scroll target input is already appearing on the screen, the scroll happens smoothly as expected.
But if the target input is not appearing on the screen and the scroll function is triggered to scroll to that input, it seems that the screen flickers (or the top appears for a fraction of a second, like a flash) and then smooth scrolling happens.
To me it seems like the HTML is trying to immediately go to the anchor (or to the top), hence the flashing, but then browser says, hold up, I need to scroll slowly
Has anyone had this experience? Anything I can do not to have the flash effect?

Hard to say without a demo, but from the way you're describing things, it sounds like the kind of thing that happens when some CSS in your stylesheet is conflicting with what Smooth Scroll tries to do.

I built a demo.
Could you look and tell me what I'm doing wrong?

DEMO: https://bitbrasil.com.br/demo.html

In mobile the effect is more noticeable.

Any tip would be very valuable.
thank you

I got it.
The input focus interferes with the animation.
I used a 'setTimeout' for focus to execute after the animation ends.