[bug]: Scrolling UI issue

[ashrafchowdury]

Which react-spring target are you using?

• [ ] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

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.

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.

Link to repo

https://react-spring.dev/docs

[ashrafchowdury]

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

[joshuaellis]

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

[ashrafchowdury]

Ok 👌

[Sid-80]

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

[joshuaellis]

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]

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

[Ayush-2301]

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