;)
Faking overflow:scroll in Webkit apps: iScroll
Posted by Steven Preston in Coding Tricks, Cross Platform, How-to, Webkit
Web tools will no doubt play a big part in the future of mobile app development and the ability to create cross-platform applications. In this regard, industry opinion-givers like to make vague, sweeping statements about whether to opt for web or native apps without really understanding the smaller yet important technical differences between each and their low-level limitations.
One such limitation that I came up against recently is on the side of web apps and is due to a flaw in Webkit – at present it is not possible to create a fixed size scrollable element in Webkit! This means that you can’t have fixed header and fooder content with a scrolling central area to your app. For me this is a huge limitation – the layout of the majority of mobile apps relies on being able to scroll only certain portions of the screen – having a restriction on this means interface design needs to be far more limited and user experience takes a big knock.
I really battle to understand how something so important has not been implemented. Fortunately, however, a workaround has been developed by Matteo Spinelli called iScroll. iScroll is a Javascript library that essentially fakes the element scrolling that should be provided by ‘overflow:scroll’. Understandably it is not quite as smooth as as native scrolling but in my opinion is definitely useable in your apps and has proved a life-saver for me in some recent apps. It’s also worth taking a look through some of Matteo’s other projects as he looks to have some interesting stuff there.
iScroll v3.3 beta 3 on iPhone from Matteo Spinelli on Vimeo.
