When creating a web app for a touch device, one thing that can cause some headache is trying to get the right "App-feeling" with a nice header that stays in place, and maybe even a footer. Since position:fixed is not supported (at least on iPhone Safari) and scrolling inline content is done using the little known 2-finger scroll (which is also without any nice feel to it whatsoever) there is basically 2 options; to implement a header and footer that moves into place when scrolling (like those annoying ads), or to implement scrolling of the "mid-part".
I spent some time on trying to find a good, free sample on how to do the later without success(but I'm sure they are out there). This weekend I got some time to play around so I thought I'd try to implement that sweet scrolling that you get inside an app on the iPhone(or the Android for that matter). A bunch of hours and quite a few curses later I came up with something that works pretty well :)
You can try it out here:
http://webkitjs.org/ScrollElement/
And here's the source code:
Although this is only tested on a Galaxy S running Froyo, it should work well on Safari on iOS (iPad, iPod, iPhone) and most Android touch phones running a fairly recent version. Oh, I tested it on Chrome and Safari on PC and Mac with decent results as well.
Feel free to use and abuse it as you please. Speaking of which, I'm not sure whether to bother putting some really open licensing in there just to clarify. Input on this would be much appreciated ;)
Posts
4 comments:
Why not using iScroll?
(this is an open question)
Mostly because I didn't find it at the time i guess ;) Taking a look at iScroll, it would probably take some more effort to make it work with Closure Compiler and fit it into other libraries. But thats on a personal use case level.
Have you tested this with form elements? I've tried iScroll4 it doesn't work with form elements?
@Jitedra: No, i haven't but i don't see any reason why it shouldn't work.
Post a Comment