search

wan2land / vue-scroll-picker

iOS Style Scroll Picker Component for Vue 2 & 3. Support All Gestures of Mouse(also MouseWheel) and Touch.
https://vue-scroll-picker.dist.be
263 stars 35 forks source link

BUG: Scroll Offset calculation breaks when placed inside popover, dialog #839

Closed akashbagchi closed 4 months ago

akashbagchi commented 4 months ago

I tried utilizing the picker component within element plus popovers and dialogs but there seems to be a bug in the Top scroll offset calculation which breaks the scroll and drag functionality of the picker.

https://github.com/wan2land/vue-scroll-picker/assets/72804789/0d6a69d4-32f1-4d1c-a4c4-fe0038f7d753

Clicking on the top and bottom of picker-area seems to update the modelValue without issues, it even highlights the selected Item correctly.

wan2land commented 4 months ago

🤔

wan2land commented 4 months ago

It seems like there might be a conflict with specific CSS.

Could you provide a simple reproducible code snippet along with the popover library you are using?

wan2land commented 4 months ago

It appears that the bug is caused by the component being rendered off-screen and then brought into view. I resolved this issue by using ResizeObserver.

Please refer to the following example: https://vue-scroll-picker.dist.be/#dialog

wan2land commented 4 months ago

I will consider this issue resolved. If you have any further questions, please feel free to create a new issue! Thank you!

akashbagchi commented 4 months ago

Thank you for your response! @wan2land

Sorry for being unavailable to provide snippets last week.