search

darsain / sly

JavaScript library for one-directional scrolling with item based navigation support.
http://darsa.in/sly
2.87k stars 496 forks source link

Ceil function is now used when calculating the item size #282

Open Morerice opened 7 years ago

Morerice commented 7 years ago

This pull request is related to this issue: https://github.com/darsain/sly/issues/200

The problem occurs because the round function is used to calculate the item width. Hence, if the width of an item is 10.3px it will be rounded to 10 and therefore, the calculated width of the frame won't be enough to contain the items.

This is shown here: https://jsfiddle.net/0cvejr3o/

In my pull request, I simply used the ceil function to calculate the width of each item.

gigatyrant commented 7 years ago

Perfect, thank you ! You saved my day.

Merge this fix please :-)

kleinfreund commented 7 years ago

I was looking into this issue and tried your modifications. They resolve the issue of not leaving enough space for the last item in my scenario, however, now there is too much space left.

Either way, using round or ceil when calculating the item size will generally lead to a wrong total size when multiplying item size by number of items.

Instead, the the natural item size needs to be used to calculate the total size. Maybe then it’s helpful to ceil this result to the next integer value.

Update: I get pretty good results when just leaving out round/ceil in the calculation of the item size. The calculated total width generally is a decimal value then, but for now it seems fine.