Question

Basically I have a bottom bar that stores a definitive amount of objects, say 30, with a width of say 2000em.

Now I want to make this div scrollable but every tutorial I look at does not explain their calculation.

My scroller will be unique because I will only allow scrolling via a next and back button (basically like paging) and I need to calculate when the div has 0 space to move so I can AJAX load more items and of course this calculation needs to be resize safe (based on div width and not pre-defined numbers).

Now I am fine with the whole resize (recalc div width on resize event) and AJAX load more objects.

What I’m not fine with is the calculation required to understand how the div should scroll and how to judge when it has no more space to scroll.

Has anyone got experience with making a dynamic scroller that only acts uopn click of a next or previous button that could explain the calculation required to understand scrollLeft/Right?

Thanks for any and all help,

Answer 1

I actually sorted this by:

1. Taking the current scrollLeft() of the inner ul within the div wrapper and add on the div (wrapper) width.
2. I checked whether the sum from point 1 was less than the UL width.
3. If so then scroll otherwise load new page if there is one.

Reverse for the previous button.

Since the wrapper has a width of 100% specified it will always be the size of the screen which means no resize function needed.