search

chenglou / react-motion

A spring that solves your animation problems.
MIT License
21.68k stars 1.15k forks source link

Chrome scroll bar invalid after I use { Motion, spring } for sidebar slider switching #562

Open TaurusWood opened 5 years ago

TaurusWood commented 5 years ago

There is a sidebar in my program that uses the overflow-y:auto attribute

Then I tried to use ref to focus() and forceupdate() on the Slider component, but it didn't work. Even iffocus() and forceupdate() are used long after the animation ends with setTimeout(), it is useless.

Later, I accidentally triggered a dispatch and the scroll bar returned to normal. I guess this is related to the view update of react

link: https://codesandbox.io/embed/1or9k8x857

version: react: 16.6.0 react-motion: 0.5.2

nkbt commented 5 years ago

It is smth to do with css not rm. if you remove

image

now things look a bit ugly and scrollbar is on the right - but it is working correctly.

One of my usecases with rm is exactly this kind of sidebar in even more complicated situation (kind of hard to extract so cannot post it here without spending too much time.

My suggestion would be write what you want in pure html + css (no react/rm, you can just save your codesandbox as html page without JS) and make sure it works well. Then in the place where you have width: XXpx - use rm to do animation. In this way you will certainly know things are going to work well.