My latest project involves creating a scrollable scheduler, inspired by vis-timeline and built using Vue.js.
One of the main challenges I'm facing is achieving smooth infinite scrolling in all directions (past and future).
I must confess that I'm still relatively new to programming, so I would greatly appreciate any feedback or evaluation of my approach.
This is what my current solution looks like:
JS:
let datelist = [yesterday, today, tomorrow]
HTML:
<div v-for="date of datelist">
<div width="100%" height="100%">{{date}}</div>
</div>
Since 3 divs occupy 300% of the screen space, it causes overflow (visible scrollbar). After rendering, I center the middle one (today).
When scrolling via drag-and-drop and 50% of the previous or next day is visible, an event is triggered to update the datelist:
Scrolling left:
*Generate yesterday's date and remove tomorrow *
datelist = [yesterday -1 day, yesterday, today]Scrolling right:
*Generate tomorrow's date and remove yesterday *
datelist = [today, tomorrow, tomorrow + 1]However, this approach has its drawbacks:
Every time the list changes, it needs to be fully re-rendered. If each day ends up having a lot of content later on (like appointments), it could impact performance.
You can only scroll linearly with this method, and if you want to jump to a specific date, say using a date picker, the entire list needs to be regenerated.
Perhaps more challenges ahead?
How would you tackle this problem? I am more interested in the process of finding a solution rather than just the solution itself.
Constraints:
- No third-party libraries
- Optimal performance
- Simplicity