How do I display a scrolling div (or other container) on a mobile browser?

Question

I am currently writing a Terms and Conditions page for a wireless hotspot captive portal.

I want to display the length Ts and Cs in a div and let the user scroll through them if they desire.

Easy enough for non-mobile browsers:

 <div id="terms" data-theme="a" style="overflow: scroll; height: 200px;">
      <p>@Html.Raw(ViewBag.Terms)</p>
 </div>

When I view the page on my mobile device, I get a div that feels like overflow: hidden and no scrolling. I've read that two finger scrolling works on iOS devices, but I need Android to work as well.

I'm using the newly released jQuery Mobile framework.

An alternate solution that would be agreeable to me is some kind of scrolling dialog box I could pop, but it seems like I would still have the same problem. I'm open to ideas.

Any thoughts? Thanks in advance for your help.

Solution

Take a look at iScroll 4; works on mobile + desktop and doesn't conflict with JQM.

Has the added bonus of having the feel of a mobile browser scroll.

Comments

[Phill Pafford]

@JayDave Yeah those are really old, you might have some luck digging around the branches: jquerymobile.com/branches