search

bsssshhhhhhh / svelte-data-grid

Lightweight and powerful data grid for svelte
MIT License
203 stars 36 forks source link

Can I take a stab at a scrolling workaround for non-Chrome-based browsers? #7

Open floer32 opened 4 years ago

floer32 commented 4 years ago

The README mentions,

Column Affixing

This feature works well on Chrome because Chrome's scroll events are not fired asynchronously from the scroll action. Firefox, Edge, and IE all fire scroll events after the overflow container has scroll on screen. This causes a jittery effect that we cannot easily work around while providing a cross-browser solution.

To fix the jitteriness on Firefox, a setting in about:config can be changed to turn off APZ. Set layers.async-pan-zoom.enabled to false. Obviously this is not a solution we can reasonably ask users to try, so I'm looking for other solutions.

Can I give a shot at helping? It seems like there are some cross-browser methods that some comparable libraries have implemented.

(Off top of head, one example that is coupled to react is here - but obviously don't want to couple to React - and another example is clusterize - but don't want to depend on another library. Maybe there is no 1 perfect approach, but maybe only 1 fallback is needed for the non-chrome-based browsers...? That'd be sweet. Maybe I'm dreaming though!)

I'm curious to try it out, because I've had to do proprietary versions of some similar functionality. In my career so far I've focused on backend more than frontend, so it could be a good exercise for me. Only thing is - it'd be good to get a better understanding of the problem first. Are there specific lines in the source, that would be a good entrypoint if I tried a fix?

bsssshhhhhhh commented 4 years ago

Currently the affixed columns have their positions updated as the user scrolls the main grid horizontally, which is the cause of the jitteryness.

We could probably avoid this problem entirely by removing the affixed columns from the main grid, and place them in a separate container next to it. A benefit of this method is that it would be trivial to add support for affixing to the right side of the grid as well.

thecodejack commented 4 years ago

The virtual scrolling implementation is so simple & good, I am planning for similar to react-virtualized based on this implementation.