2-finger scrollable div on iPhone?

Question

I have a UIWebView built into my iPhone app and I would like to permanently store the locked DIV header and footer on a page with a scrollable DIV center.

I know I can do this using the header / footer, which are UIView elements, but I want the header and footer to be an HTML div, as a pure HTML / JS / CSS solution will be easier to port to Android / PalmPre / AdobeAir which will be on my task list soon.

I can do this using the techniques mentioned here:

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

But this requires the user to use 2 fingers to scroll through the div, which is unsatisfactory for me ...

Any suggestions on how to do this?

Thanks,

Brad

Answer 1

I found a person who implemented a reusable solution for this with a header and footer:

http://cubiq.org/iscroll-4

Answer 2

I'm not too familiar with UIWebView, so this can be an absolutely stupid suggestion. But is there anything preventing you from having three UIWebViews per page? One for the header, one for the body and one for the footer. Because breaking it sounds like the right idea.

Answer 3

, ? iPhone .

index.html div "header", "container" "footer" , fixed.js. , "touchmove":

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

"touchstart", "touchmove" "touchhend", div "content" "". "content" div .

100% HTML/CSS/JavaScript, CSS JavaScript WebKit, . , .

, . "Doctyper" Herrara Mobile Safari.

Answer 4

, div, . , div . (-) .

iPhone/touch, , , .

Answer 5

CSS CSS Safari, , , . -, "-webkit" "-khtml", , WebKit, 3D . Android.

JavaScript - WebKit WebKit API DOM . javascript , .

Answer 6

iScroll iphone, , , . , (1.6) , , javascript, .

Answer 7

<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">

HTML-, .