Div à défilement sur iPhone sans utiliser 2 doigts?

Question

J'ai une application UIWebView intégrée dans mon application iPhone et je souhaite conserver à tout moment un en-tête et un pied de page DIV verrouillés sur la page, avec un centre DIV à défilement.

Je sais que je pourrais le faire en utilisant un en-tête / pied de page qui sont des contrôles UIView, mais je veux que l'en-tête et le pied de page soient des divs HTML, car une solution pure HTML / JS / CSS sera plus facile à porter sur Android / PalmPre. / AdobeAir, qui sera bientôt sur ma liste de tâches.

Je peux le faire en utilisant des techniques comme celle mentionnée ici:

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

Mais cela nécessite que l'utilisateur utilise 2 doigts pour faire défiler la division, ce qui ne me satisfait pas ...

Des suggestions sur la manière de procéder?

Merci,

Brad

Answer 1

J'ai trouvé quelqu'un qui implémentait une solution réutilisable, avec un en-tête et un pied de page:

http://cubiq.org/iscroll-4

Answer 2

Je ne connais pas très bien UIWebView. Il s’agit donc peut-être d’une suggestion totalement idiote. Mais y a-t-il quelque chose qui vous empêche d'avoir trois UIWebViews sur la page? Un pour l'en-tête, un pour le corps et un pour le pied de page. Parce que casser ça ressemble à la bonne idée.

Answer 3

Est-ce ce que vous cherchez? ouvrez ce lien sur votre iPhone ou votre simulateur .

Le fichier index.html contient trois éléments div pour "en-tête", "conteneur". et " pied de page " directement sous le corps, alors que tout le travail est effectué dans le fichier fixed.js. Le document est mis en place en annulant l’action normale pour l'option "touchmove". événement:

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

Ensuite, la création d'écouteurs d'événement pour le "touchstart", "touchmove", demande beaucoup de travail. et " touchend " les événements qui sont attachés au "contenu" div sous "conteneur". La logique se résume à déplacer simplement le "contenu". diviser de haut en bas.

Cette solution est 100% HTML / CSS / JavaScript. Toutefois, certains CSS et JavaScript propriétaires de WebKit peuvent limiter la portabilité. Cela peut prendre un peu de peaufinage pour travailler sur un autre appareil mobile, mais ce serait une bonne preuve de concept à partir de laquelle commencer.

Je n'ai pas créé ce projet exemple génial, je le porte simplement à l'attention de la communauté. Pour plus d'informations et un lien vers le projet compressé, lisez Richard " Doctyper " Le message complet de Herrara sur Positionnement fixe dans Mobile Safari .

Answer 4

Peut-être maladroit, mais vous pouvez repositionner l'en-tête et le pied de page par-dessus le div lorsque l'utilisateur fait défiler l'écran. De cette façon, votre div principale n’a pas besoin de faire défiler. Aucune aide pour quoi que ce soit (encore) en utilisant des cadres.

C’est l’un des problèmes les plus irritants pour le navigateur avec l'iPhone / Touch, j'aimerais que vous puissiez vous concentrer sur une partie de la page, comme un navigateur normal.

Answer 5

Pour un code CSS, faites uniquement référence à La référence CSS de Safari a probablement ce que vous recherchez. Vous serez particulièrement intéressé par tout ce qui commence par " -webkit " ou "-khtml " car ce sont des propriétés étendues disponibles uniquement avec WebKit, comme 3D et Touch. Devrait s'appliquer également à Android.

Avec JavaScript, la Introduction aux sujets de programmation de WebKit DOM et Référence de l'API DOM WebKit sont des guides utiles. Jetez un coup d’œil à la la démo de la table lumineuse pour copier / coller du javascript lors de la manipulation, voilà comment je résoudrais cela.

Answer 6

J'ai implémenté iScroll sur iphone et il est vraiment fluide et rapide et vous pouvez faire ce que vous voulez. Les inconvénients sont que Android (1.6) refuse de faire défiler ce que je voulais et bloque parfois les autres javascript, le cas échéant.

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

Ajouter ceux-ci à votre code HTML peut résoudre votre problème.