The classic Pausing Up Down Scroller has gotten more than an oil change, with a complete rewrite that now uses CSS transitions for the smoothest up down scrolling animation possible! Along with mobile optimized performance, the scroller is now also responsive, letting you specify a percentage width that expands and contracts to the parent container’s dimension. You can now also dynamically pause, resume or re-populate the scroller with new contents. Check out the new script here.
On a technical note, we ran into a huge hurdle when trying to use CSS3 transitions to animate the two children DIVs of each scroller into view that was initially out of sight due to its parent container being set to overflow:hidden on Chrome iOS devices. The animating DIV refused to be visible as it was transitioning into view and towards its final position until the very end of the transition, remaining hidden along the way. The issue seems to stem from iOS’s aggressive optimizations that only updated an initially obscured DIV’s visibility at the end of a transition, and not in real time. We got around this problem by making sure the obscured DIV was partially visible from the get go, by defining a child pseudo element that poked out into the visible area of the parent DIV. This was realized using the following CSS inside the scroller:
div.pausescroller > div.innerDiv:before{
content: '';
position: absolute;
bottom: 100%;
height: 1000px;
width: 1px;
z-index: -1;
}
With this code the .innerDIV DIVs carry a pseudo element that extends upwards into the visible area of the parent container, even while the DIVs themselves and their contents are initially hidden from view, forcing Chrome iOS browsers to not make assumptions about the DIVs’ visibility as we transition them. This is a technique you may find useful.