CODEWITHSUNDEEP
cssipadhtmlscroll
Martin
Martin

Reputation: 231

Problems with div vertical scrollbars on iPad

When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?

HTML AND CSS:

<div class="searchResult">
    //Here I show the search result
</div>

div.searchResult
{
    height: 540px;
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

Upvotes: 11

Views: 39468

Answers (3)

Bennett McElwee
Bennett McElwee

Reputation: 25760

iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:

iScroll is evolving and adding many new features to the basic scrolling functionality. If all you need is the plain old scroller for mobile webkit, you should really use iscroll-lite.js instead.

iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.

Upvotes: 2

user697021
user697021

Reputation: 1

For some odd reason changing the div to a span works on an iPad.

Upvotes: -1

tahdhaze09
tahdhaze09

Reputation: 2213

I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.

Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html

Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch

Upvotes: 8

Related Questions