Scrollable div on iPhone without using 2 fingers?

Question

I\'ve got a UIWebView embedded in my iPhone app, and I\'d like to keep a locked header and footer DIV on the page at all times, with a scrollable center DIV.

I know

Answer 1

I found someone that implemented a reusable solution for this, with a header and a footer:

http://cubiq.org/iscroll-4

Answer 2

Is this what you're looking for? Open this link on your iPhone device or simulator.

The index.html file has three div elements for "header", "container" and "footer" directly under the body, while all the work is done in the fixed.js file. The document is fixed in place by canceling the normal action for the "touchmove" event:

    // Disable flick events
    disableScrollOnBody : function() {
        document.body.addEventListener("touchmove", function(e) {
            e.preventDefault();
        }, false);
    },

Then, a lot of work goes into creating event listeners for the "touchstart", "touchmove" and "touchend" events which are attached to the "content" div under "container". The logic boils down to simply moving the "content" div up and down.

This solution is 100% HTML/CSS/JavaScript, however there is some WebKit proprietary CSS and JavaScript which may limit portability. It may take a bit of tweaking to work on another mobile device but this would be a good proof-of-concept to start from.

I did not create this awesome sample project, I'm merely bringing it to the community's attention. For more information and a link to the zipped project, read Richard "Doctyper" Herrara's entire post on Fixed positioning in Mobile Safari.

Answer 3

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">

Add those to your html code may solve your problem.

Answer 4

May be clunky, but you could reposition the header and footer over top of the div as the user scrolls. This way your main div doesn't need to be scrollable. No help for anything (still) using frames though.

This is one of the more irritating browser issues with the iPhone/touch, I wish you could just focus on part of the page like a normal browser.

Answer 5

I'm not too familiar with the UIWebView, so this may be a totally silly suggestion. But is there anything stopping you from having three UIWebViews on the page? One for the header, one for the body, and one for the footer. Because breaking it up sounds like the right idea.

Answer 6

I have implemented iScroll on iphone and it is really smooth and fast and you can do whatever you want. Disadvantages are that android (1.6) refuses to scroll how I wanted and sometimes block other javascript if there are any.