FT Scroller

Support for both subframe scrolling and position:fixed has improved recently, but solutions offered natively by browsers still fall short in common use cases. After experimenting with TouchScroll and Zynga Scroller, we started from scratch and built our own.

On touch devices with browsers such as Mobile Safari, Android Browser and Chrome for Android, there has historically been a problem with scrolling of subpage elements. The browser would handle the scrolling of the page itself, offering a rich experience with plenty of support for intuitive operation – smooth acceleration and deceleration, momentum, elasticity, zooming, scroll bars during motion etc. This did not initially apply to subpage elements such as scrollable DIVs and IFRAMEs. Added to this the requirement for subpage scrolling was heightened by the lack of support for position:fixed (which would have otherwise enabled the page to scroll normally apart from a fixed element or two)

Despite the broadening support for position:fixed and subframe scrolling via CSS properties such as -webkit-overflow-scrolling:touch, there are still a number of use cases that we can’t satisfy in CSS alone. The most obvious is a paged carousel, where the scroller is expected to snap to page breaks.

FTScroller offers the following features, all of which are highly configurable:

  • Bouncing (elasticity) at extremities of scrolled content
  • Pagination, snapping to fixed width segments
  • Flinging
  • Custom scrollbars
  • Wide support for mouse or touch input across Mobile Safari (iOS 4+), Android Browser (OS 2.2+), Microsoft Internet Explorer 10, and most modern desktop browsers (IE 9+, FF 4+, Safari 3+, Chrome 1+, Opera 9.5+)

We initially used TouchScroll, and later Zynga Scroller, but started a rewrite when we realised that we would need IE10 support and at the same time we could improve performance. As part of their beta rebuild, the BBC was using iScroll for a while and we believe they have also now built their own scroller.

You can see FTScroller in action in the FT web app, the Economist on BlackBerry Playbook, and in the examples on Github. Feel free to fork it, and let us know how you get on. We welcome pull requests if you find any bugs or want to add a new feature.