Horizontal scroll of a content with variable width

Can I ask for some advice…

I want to display products in a row, to make them easier to visually compare. And I find convenient to use the horizontal scroll interaction, learned from @PixelGeek (Thank you! :grinning_face_with_smiling_eyes: )

But the content is dynamic (plus also further changes by custom filters) and thus varies in width (length). And so, if I want to achieve the last product neatly coming into the view by the time the scroll is over - regardless of the size of the device -, I need to move the container horizontally each time by a different distance (if I am correct, this distance would be the Width
of the current container minus the Viewport Width).

What would be the best way to achieve this? The closest I could get so far is by using some empirical percentage of the container, which helps me to reflect the variable container width, but doesn’t reflect the actual viewport size, so there is always some empty space after the last product, depending on the ‘constellation’ of the variables…

Is there a neater way, please?
Thank you!

Here is my public share link: Designer
And the live project: heron.webflow.io

1 Like