vue-virtual-scroller
vue-virtual-scroller copied to clipboard
Akryum
Question / Help With Debugging
Hello, I am trying to use a page-mode scroller but it simply does not load the items. I have attached my Vue classes & GIFs
page-mode=true
Vue class file: https://paste.voidcrafted.me/iwuxituceh.vue Behaviour: https://i.jay.network/TSewhD.gif
page-mode=false (& relevant css)
Vue class file: https://paste.voidcrafted.me/uqowudahaj.vue Behaviour: https://i.jay.network/2xnpDi.gif
Hmm, interesting, it was breaking because it was inside an element with overflow-x: hidden - https://i.jay.network/4RY0E2.png
Maybe still a bug that needs to be looked into?
Same issue. Also, when resizing the window, items inside the scroller rerender normally.
I found the cause of the issue.
Look at this line: https://github.com/Akryum/vue-virtual-scroller/blob/master/src/components/RecycleScroller.vue#L493
This function returns DOM node scroll event listener should be attached do. So, it uses this package: https://github.com/olahol/scrollparent.js, which finds nearest parent having overflow(-x, -y) at least one with value auto or scroll. You can try to do it yourself (or calling that library) settings overflow to hidden (or removing it at all) from all such parents.
Now, a question to @Akryum. Should the library really look for some parent scrollable node, but not just using body? Even though, I think you should let users set this element instead of just guessing it.
I second @Tarik02 , spent a couple hours debugging this but discovered it was because it was wrapped by overflow-x: none. This should be mentioned in the description of page-mode to save someone, somewhere, some time.
Hello good evening, I also encounter this issue, just want to ask how did you solve this issue ?
Hey! Sorry, this issue was a while ago and I don't remember how I solved it, and unfortunately the image is no longer on my CDN.
Sorry I couldn't help
Hi, it's ok no worries thank you. but if you manage to remember on how to solve it, do let me know. Thank you.
@m-val Without seeing any code, it would be hard to tell what the issue is. But it seems the root cause of the issue is with the overflow-x CSS attribute. Check your code to make sure you're not wrapping the virtual scroller in a component that uses that attribute.