This is a simple skrollr parallax demo to help illustrate the concept outlined here used to remedy the seemingly arbitrary cutoff of page content in mobile, and particularly iOS devices.
This demo consists of:
- A 'before' page which is simply a clone of the classic parallax example with some additional page content added within
#skrollr-bodyto reproduce the seemingly arbitrary cutoff on mobile devices. - An 'after' page, identical to the before page, but which simply adds this keyframe information -
data-bottom="top: 0%;" data-top="top: 0%;"- to the last element (the#doneelement in this case) within#skrollr-bodyto identify the end of (#skrollr-body) relative page content for skrollr, particularly in mobile, thus helping skrollr properly calculate mobile page content height and in turn 'fixing' the seemingly arbitrary cutoff.
##NOTE:##
The keyframe markup effects the document length. For instance, changing the above keyframe markup to data-bottom-top="top: 0%;" data-top-bottom="top: 0%;" will add 100% viewport height to the total document height, in turn causing the actual page bottom to scroll up out of view.