Will complete this, and add a demo, when I have the time. Apologies.
A horizontal scrolling component, primarily for mobile devices, based on the scrolling articles list seen in the iOS BBC News app.
This was developed for the redesign of the Orange UK mobile portal in 2012, and indeed it was used on the launched homepage. However, subsequent iOS updates means that this now no longer works as it should. I'm no longer supporting it.
- Allows for swipe left and right gestures.
- Passed vertical scroll back to the device.
- Can be used with images, links, text, anything.
- Calculates the viewport width, and the width of the scrolling items to 'intelligently' scroll the list. For example - a device that can display 3 items at a time, using a list containing 7 items will show items 1 - 3 initally, 4 - 6 after the first swipe/scroll, and 5 - 7 on the final scroll. Never any unnecessary whitespace.
- Auto adjust after oritentation change. For example - a device that can display 3 items at a time in portrait mode is scrolled to the end, and shows items 5 - 7 (as above). If that devices oritantation changes to landscape, and it can now show 4 items completely, the list automatically scrolls right, so items 4 - 7 are now shown.
- Bounceback effect, like iOS, when a scroll is not possible (scrolling left when on 'page' 1).
- Uses drag and drop on desktops to simulate touch events.
- Uses navigation arrows when gestures aren't possible (Windows Mobile).
- Lost of other stuff...
- Tested on iOS 4 - 5, Android 1.6 - 2.3, Windows Mobile; desktop in Chrome, Safari, Firefox, IE7, IE8.