pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
27.98k stars 1.19k forks source link

[bug]: Scrolling UI issue #2135

Open ashrafchowdury opened 1 year ago

ashrafchowdury commented 1 year ago

Which react-spring target are you using?

What version of react-spring are you using?

https://react-spring.dev/docs

What's Wrong?

Main scrolling issue

When we scroll over this component first the main page scrolls then this component starts scrolling. image

Bug Preview

When we scroll back to the top then the page behaves occurred. https://user-images.githubusercontent.com/87828904/229473880-7bb6854a-a1d3-4a62-bfef-12e7f92f5e46.mp4

To Reproduce

https://react-spring.dev/docs

Expected Behaviour

When we scroll over this component just this component needs to scroll not the main page. image

Link to repo

https://react-spring.dev/docs

ashrafchowdury commented 1 year ago

I can fix this issue, can someone please assign me to work on this issue?

joshuaellis commented 1 year ago

You can just submit a PR to solve it, I don't normally assign issues.

ashrafchowdury commented 1 year ago

Ok 👌

Sid-80 commented 1 year ago

Hii I want to solve this bug will you please provide the link of repo to this website.

joshuaellis commented 1 year ago

Hii I want to solve this bug will you please provide the link of repo to this website.

you're in it! it's under docs

Sid-80 commented 1 year ago

Will you please help to run the docs section as local server ?

Ayush-2301 commented 1 year ago

Hi @joshuaellis The problem with the sidebar is due to its height being set to 100%, which causes the bug. When I reduced its size, it seems to have solved the problem. Here is the sample:

https://user-images.githubusercontent.com/114101923/234265576-660eaf93-814e-4fe1-a5f1-edaea0eb487b.mp4

However, there is still one issue that occurs: when the sidebar reaches its endpoint and we continue to scroll, the whole page is scrolled along with it. Here is the sample:

https://user-images.githubusercontent.com/114101923/234266290-58412d07-26fb-49df-adde-b411bcbbe14d.mp4