magic-akari / seamless-scroll-polyfill

Scroll Behavior polyfill
https://www.npmjs.com/package/seamless-scroll-polyfill
MIT License
159 stars 12 forks source link

On element click scrolling to the top #113

Open glassesUSA opened 3 years ago

glassesUSA commented 3 years ago

When clicking and using element.scrollTo, it sometimes does not scroll but pushes the page upwards

zergeborg commented 2 years ago

I use v 2.1.5 in an Angular application and I observed similar behavior in Safari 13.1.3 (on Macos).

When I execute the following code: elementScrollIntoView(element,{ behavior: 'smooth', block: 'start' }); this lib scrolls the element, but also pushes the whole page upwards.

To be more precise in my case the page contains the scrolled element relatively positioned inside an absolutely positioned element. When the code is executed, it not only scrolls the content inside the target element, but it also moves the absolutely positioned element a few pixels upward (until the relatively positioned element reaches the viewport boundaries, then it gets stuck there).

magic-akari commented 2 years ago

I use v 2.1.5 in an Angular application and I observed similar behavior in Safari 13.1.3 (on Macos).

When I execute the following code: elementScrollIntoView(element,{ behavior: 'smooth', block: 'start' }); this lib scrolls the element, but also pushes the whole page upwards.

To be more precise in my case the page contains the scrolled element relatively positioned inside an absolutely positioned element. When the code is executed, it not only scrolls the content inside the target element, but it also moves the absolutely positioned element a few pixels upward (until the relatively positioned element reaches the viewport boundaries, then it gets stuck there).

Hello, @zergeborg, Thanks for the feedback for more detailed content. The fixed element has been considered in the code. not the absolute element. It seems that I forgot this case. Can you provide a code sandbox link to reproduce this issue?