If the content area can be expanded and collapsed , the scrollbar does not refresh properly
34205037 opened this issue · 2 comments
First of all, I am very sorry for my terrible English.
I found a problem when I tried to use vuebar, The same problem exists in Element-UI and Vuetify.
See the following example：
- element ui
https://jsfiddle.net/mgjzLy4w/15/ - vuetify
https://jsfiddle.net/mgjzLy4w/18/
- Multiple clicks on collapsible elements，Observe the change of the scroll bar
- Scroll or drag the scroll bar to observe its changes
Maybe I missed something，Thank you for any reply.
Hi,
It happens because Vuebar doesn't pick up component change in some scenarios where 3rd party libraries/frameworks are used (especially when such components are not controlled by you via state).
You can manually refresh vuebar using this.$vuebar.refreshScrollbar(elementReference, options) or just by force updating the component containing vuebar this.$forceUpdate.
I did a very quick example on your Element-UI fiddle: https://jsfiddle.net/mgjzLy4w/21/
In that example I've also used interval to update vuebar every 10ms so it's smoothly synced with accordion/collapse animation. In production it might be good to consider to use requestAnimationFrame instead setInterval, though.
Side note: In future (Vuebar 2.x) I plan to use ResizeObserver API to improve such cases, whenever possible.
@DominikSerafin
This method works very well, It's enough to solve my problem.
Expect new features of Vuebar 2.x.
Thank you very much.