| DEFUNC : UX Design & Tech Thoughts

There are numourous ways and Javascripts out there to sort out a scrolling panel. Although when it comes to getting one that works on a Safari Browser in the iPhone when a double finger action is used to initiate the scroll action item - well then it is a bit tougher. Iframes, JS heavy scrolling divs etc are all options out there, but not really what you want to employ. Namely they are heavy and they dont work too well.

Good news is the great people over at Dream-in-Code provided this simple snippet that works a treat : http://www.dreamincode.net/code/snippet132.htm

Just add it to your page, open it on the iPhone browser then put two fingers over the content area and drag down. Presto : light-weight user scrolling on the iPhone. Add in some AJAX for updating mapping, or even just use it to scroll contained content areas easily.

And here is the snippet again - just in-case the other one gets taken down :

 <div style=“position:absolute; left:100px; top:100px; width:250px; height:100px; background-color:#ffffff; overflow:auto;”>

PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />
PUT YOUR TEXT HERE <br />

</div>

Filed under: CSS, General News on May 21st, 2008