I am currently working on creating a carousel-style list of items similar to the iOS native date/time pickers, where the list can be shifted both upwards and downwards.
The positioning of each item is determined by the `top` property from a model, which is then assigned to each individual list item element using absolute positioning.
I have successfully implemented the functionality in one direction - when you press 'go up', it behaves as intended (you can see this in the snippet below). However, when attempting to replicate the code for the opposite direction by switching the `.pop()` function with `.shift()` and `.unshift()` with `.push()`, the behavior is different. The values of the items are reassigned but nothing moves.
I observed that in the second scenario, the list items are being rendered from the beginning for some reason, disregarding the item keys. This prevents the smooth transition of coordinates.
Can anyone offer suggestions on how to make this mechanism work seamlessly in both directions? Please take a look at the provided snippet:
...