Alburkerk Alburkerk - 1 month ago 8x
HTML Question

Infinite Scroll + Calculation of how many has been scrolled

I am developing an ionic app and had some trouble recently in making some functionalities.
First of all, I am using ionic 1, thus I am using AngularJS 1.

My goal is to create a calendar on ionic. That seems pretty classic, but most of the existing templates are displaying a month, and you have to touch a button or slide to the right or something to go over the next month. It seems a pretty bad UX to me.

I want to make a calendar which would allow someone to display dynamically and vertically every day from every month (only two -for instance- are displayed at the same time cause of screen size).

An Image For You

Note : Don't mind the colors, it is for additional functionalities.

Here on the picure I can just scroll down and October appears as August disappears (French month names on the picture sorry).

I looked on many templates how calendars were done in Javascript, and the simplest way seems to be the dynamic generation of the html as a string (That seemed dirty to me at first view but after looking forward I found this elegant somehow). Consequently, I though I just had to generate the html of let's say 7-8 months, center on the 2 months in the middle and change it dynamically each time the user scroll.

My big question is : It is possible to calculate exactly how many the user scrolled down with ionic-scroll ?
If I know he scrolled down the distance equivalent to two months, I know I have to calculate two more months in future and drop those who are too far.

Does that solution even make sense ? Or does anyone have an idea of how to do this ?

Will be glad to hear every comment on this. If any further information is required, I will try to answer as fast as possible.


Seems like you can just do this with If you set the correct height for each month this should just work out of the box.

  <div collection-repeat="month in months"
    //month template