Scrollbaren div auf dem iPhone ohne 2 Fingern?

StackOverflow https://stackoverflow.com/questions/615357

  •  03-07-2019
  •  | 
  •  

Frage

Ich habe eine UIWebView in meinem iPhone App eingebettet bekomme, und ich möchte jederzeit eine gesperrte Kopf- und Fußzeile DIV auf der Seite zu halten, mit einem scrollbaren Zentrum DIV.

Ich weiß, dass ich dies tun könnte eine Kopf- / Fußzeilen verwenden, die UIView Kontrollen sind, aber ich möchte den Header und Footer-HTML-divs sein, als reine HTML / JS / CSS-Lösung wird einfacher in den Hafen Android / PalmPre / AdobeAir, die auf meiner To-do-Liste relativ bald sein werden.

Ich kann wie hier erwähnt dies mit Techniken tun:

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

Dies erfordert jedoch, dass der Benutzer zwei Finger verwenden, um die div zu blättern, die mir nicht zufrieden stellend ist ...

Alle Vorschläge, wie dies zu tun?

Danke,

Brad

War es hilfreich?

Lösung

Ich fand jemanden, der eine wiederverwendbare Lösung für diese implementiert, mit einem Header und einer Fußzeile:

http://cubiq.org/iscroll-4

Andere Tipps

Ich bin nicht allzu vertraut mit dem UIWebView, so kann dies ein ganz blöder Vorschlag sein. Aber gibt es alles, was man aus mit drei UIWebViews auf der Seite zu stoppen? Ein für den Header, ein für den Körper, und ein für die Fußzeile. Weil es bis zu brechen klingt wie die richtige Idee.

Ist das, was Sie suchen? diesen Link Öffnen auf Ihrem iPhone Gerät oder Simulator .

Die Datei index.html hat drei div-Elemente für „header“, „Container“ und „Fußzeile“ direkt unter dem Körper, während der ganze Arbeit in der fixed.js Datei. Das Dokument wird an Ort und Stelle fixiert, indem die normale Aktion für das „Berührungsbewegungs“ Ereignis Cancelling: 

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

Dann geht eine Menge Arbeit in die Ereignis-Listener für die „touchstart“ schaffen „Touchmove“ und „touchend“ Ereignisse, die auf den „Inhalt“ div unter „Container“ angebracht sind. Die Logik läuft darauf hinaus, einfaches Bewegen des „Inhalt“ div nach oben und unten.

Diese Lösung ist 100% HTML / CSS / JavaScript, aber es einige CSS WebKit proprietär ist und JavaScript, die Portabilität begrenzen. Es kann ein wenig dauern zwicken auf einem anderen mobilen Gerät zu arbeiten, aber dies wäre eine gute Proof-of-Concept starten aus.

Ich habe dieses tolle Beispielprojekt nicht schaffen, ich bringe ihn lediglich die Aufmerksamkeit der Gemeinschaft. Weitere Informationen und ein Link zu dem Reißverschluss Projekt, las Richard „Doctyper“ gesamten Beitrag des Herrara auf Feste Positionierung in mobile Safari .

Kann sein, klobig, aber man konnte die Kopf- und Fußzeile über Oberseite des div beim Scrollen des Nutzers neu positionieren. Auf diese Weise Ihre Haupt div muss nicht scrollbaren sein. Keine Hilfe für alles (noch) mit Frames aber.

Dies ist eine der irritierenden Browser Probleme mit dem iPhone / touch ist, wünsche ich Sie nur auf einen Teil der Seite wie ein normaler Browser konzentrieren konnten.

Für eine CSS nur verweisen auf die Safari CSS Referenz wahrscheinlich hat, was Sie suchen. Sie werden vor allem daran interessieren, etwas mit „-webkit“ beginnen oder „-khtml“ als denjenigen erweitert werden Eigenschaften nur mit WebKit wie 3D und berührt. Sollte gilt auch für Android.

Mit JavaScript, um die Einführung in WebKit DOM-Programmierung Themen und WebKit DOM-API-Referenz Führer go-to sind. nimmt auf jeden Fall einen Blick auf der Demo Licht Tabelle für einige Kopieren und Einfügen von Javascript Ihre Berührungen zum Umgang mit als das ist, wie ich das lösen würde.

Ich habe iScroll auf iphone umgesetzt und es ist wirklich glatt und schnell und Sie können tun, was Sie wollen. Nachteile sind, dass Android (1.6) weigert sich zu bewegen, wie ich wollte, und manchmal andere Javascript blockieren, wenn es welche gibt. 

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

diejenigen zu Ihrem HTML-Code hinzufügen kann Ihr Problem lösen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top