Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.74k stars 915 forks source link

Items turn blank when scrolling quickly, seems to be related to the calculation of the value of the translate attribute #842

Closed LiuZiqi-dual closed 1 year ago

LiuZiqi-dual commented 1 year ago

Describe the bug

I'm experiencing an issue with vue-virtual-scroller's RecycleScroller while building a schedule-like component. The issue arises when rendering a large number of columns. As the number of columns increases, it becomes more likely for some columns to turn blank. After checking the console, it looks as if the value of the translate property is not calculated correctly. Did you guys find out any solutions about this? Or is it possible to provide an API to force a recalculation of the value of the translate property in order for me to manually fix the problem when the scroll ends?

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 7840H w/ Radeon 780M Graphics
    Memory: 13.54 GB / 29.71 GB
  Binaries:
    Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.10.3 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (100.0.1185.36)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Validations

LiuZiqi-dual commented 1 year ago

Nevermind, I've solved the problem by addEventListener to the scrollEnd event and triggering the updateVisibleItems event in the RecycleScroller Ref.