I looked through many different posts, but I haven't found any working solution. There are many solutions for snapping horizontal scrollbars, but every one of them works only, if the items have the same sizes.
I will give you a small example:
The screen is able to show 300px is it's width. The items inside the scrollbar can have different sizes, like:
- 1: 300px
- 2: 300px
- 3: 500px
- 4: 400px
The whole layout would look like this, if * is 100px:
1 2 3 4
[***][***][*****][****]
Now the scrollbar should snap in place exactly at the start/end of an item. It's easy for the first two items, because they have the same size like the screen. But for the rest I can't think if a working solution.
So if you scroll to the third item, the scrollbar should snap in place right at the beginning of item 3 on the left side of the screen. ( '!' = screen size)
1 2 3 4
[***][***]![***!**][****]
If you scroll almost to item 4, the scrollbar should snap in place exactly at the end of item 3 on the right side of the screen.
1 2 3 4
[***][***][**!***]![****]
It's so hard to explain. I hope you understand my problem.
