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 that I could do this using a header/footer that are UIView controls, but I want the header and footer to be HTML divs, as a pure HTML/JS/CSS solution will be easier to port to Android/PalmPre/AdobeAir, which is going to be on my todo list relatively soon.

I can do this using techniques like the one mentioned here:

http://defunc.com/blog/?p=94

But this requires that the user use 2 fingers to scroll the div, which is not satisfactory to me...

Any suggestions on how to do this?

Thanks,

Brad

Solution 1

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

http://cubiq.org/iscroll-4

Solution 2

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.

Solution 3

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.

Solution 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.

View more solutions