Scrollable Div

Scrollable DIV on mobile phones

Here is a sample standard DIV with overflow:auto

iPhone/iPad: It looks like you can't scroll this div but you can scroll it both to the right and down if you use two fingers.
Blackberry/Android 3.x: You can also scroll a normal div vertically and horizontally with most touchscreen Blackberry phones and with Android 3.x tablets. But it is not obvious because they lack scrollbars.
Windows Phone 7: In my opinion the only one that got this right is Windows Phone 7. You can scroll the div with one finger and you know it is scrollable because of there being a scrollbar.

Here we will discuss 3 solutions to the above problem:

1. touchscroll javascript
2. height: auto;
3. Scroll Buttons

dlc_b

Download

The way we fix the scrollable DIV for one finger scrolling with iPhone/iPad and Android phones is by the use of touchscoll.js.

At the very bottom of touchscroll.js is the line:

touchScroll('touchscroll_div');

Change touchscroll_div to the id of any div that you want to be scrollable with one finger. You can add more touchScoll('your_div_id') lines to the bottom of the code also. Add this javascript after the div is declared in your html document:

<script type="text/javascript" src="touchscroll.js"></script>

Most of this simple code was taken from chris-barr.com with a few additions by me. I added comments about the additions. One of the additions lets you scroll divs horizontally and not just vertically. Another addition is to not apply touchstart and touchmove events to Android 3.x devices because I found out that the Motorola Xoom tablet (Android 3.x) has built in scrolling and when you apply these events to it, it breaks any div scolling from working correctly. This works fine by detecting if the device is android 3 or honeycomb. However, some advanced Android users like to change the user_agent of the browser to that of a desktop browser. That removes 'Android 3' and 'Honeycomb' from the user_agent string. So then the code still breaks the scrolling. This is unfortunate on Google's part. The code does not break Blackberry, windows phone 7 or iPhone/iPads. So Google should really program their OS to not break with this code also.

Here is a scrollable div using one finger by the means of touchscroll.js:

2. height: auto;

Another option, if you don't want to fool around with adding touchscroll.js, is to just change the height of any of your divs from a set height to height: auto; using css. This would be put in your mobile stylesheet, so it would not affect desktop users:

.scroll_div { height: auto; width: auto; }

By putting the above in your mobile.css file then any div with a class of scroll_div will automatically not have a set height but will grow to the height of all of the content of the div. So all of the content will always be visible. Here is an example of height: auto and width: auto div:

3. Scroll Buttons

A third option to deal with scrollable divs on smartphones is to add page up and page down buttons next to the scrollable div so that users know that they are scrollable even though on most devices there are no scrollbars.

dlc_b

Download

At the bottom of scrollbutton.js is this line:

scrollbutton('scrollbutton_div');

Change scrollbutton_div to the ID of the div you want to have scroll buttons for. Then place this javascript after the div is declared in your document:

<script type="text/javascript" src="scrollbutton.js"></script>

var scroll_opt = 0; // 0 = scroll up/down; 1 = page up/down
var scroll_pos = 0; // 0 = side of div; 1 = top/bottom of div
var scroll_slack = 10; // How many pixels will remain from the top or bottom of the div when page up/down

Here is a div with scroll buttons by means of scrollbutton.js:

Here is a div with scroll buttons that do page up/page down with scroll_opt=1; scroll_pos=1; by means of scrollbutton.js:

For no apparent reason, these div scroll buttons do not seem to work on Android 3 (Honeycomb) or Windows Phone 7. It is a good thing then that these OS browsers support one finger scrolling of a div.

Next: Fixed Divs