Div desplazable en iPhone sin usar 2 dedos?
https://stackoverflow.com/questions/615357
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo un UIWebView incrustado en la aplicación de mi iPhone, y me gustaría mantener un encabezado y pie de página bloqueados DIV en la página en todo momento, con un centro DIV desplazable.
Sé que podría hacer esto usando un encabezado / pie de página que son controles UIView, pero quiero que el encabezado y el pie de página sean divs HTML, ya que una solución HTML / JS / CSS pura será más fácil de portar a Android / PalmPre / AdobeAir, que estará en mi lista de tareas relativamente pronto.
Puedo hacer esto usando técnicas como la que se menciona aquí:
Pero esto requiere que el usuario use 2 dedos para desplazar el div, lo que no me satisface ...
¿Alguna sugerencia sobre cómo hacer esto?
Gracias,
Brad
Solución
Encontré a alguien que implementó una solución reutilizable para esto, con un encabezado y un pie de página:
Otros consejos
No estoy muy familiarizado con UIWebView, por lo que esta puede ser una sugerencia totalmente tonta. Pero, ¿hay algo que te impida tener tres UIWebViews en la página? Uno para el encabezado, uno para el cuerpo y otro para el pie de página. Porque dividirlo suena como la idea correcta.
¿Es esto lo que estás buscando? Abra este enlace en su dispositivo o simulador de iPhone .
El archivo index.html tiene tres elementos div para " encabezado " ;, " contenedor " y "pie de página" directamente debajo del cuerpo, mientras que todo el trabajo se realiza en el archivo fixed.js. El documento se fija en su lugar cancelando la acción normal para el "touchmove" evento:
// Disable flick events
disableScrollOnBody : function() {
document.body.addEventListener("touchmove", function(e) {
e.preventDefault();
}, false);
},
Luego, se necesita mucho trabajo para crear oyentes de eventos para el "toque de arranque", "toque de movimiento" y " touchend " eventos adjuntos al " contenido " div bajo " contenedor " ;. La lógica se reduce a simplemente mover el "contenido". div arriba y abajo.
Esta solución es 100% HTML / CSS / JavaScript, sin embargo, hay algunos CSS y JavaScript propiedad de WebKit que pueden limitar la portabilidad. Puede tomar un poco de ajuste trabajar en otro dispositivo móvil, pero esta sería una buena prueba de concepto para comenzar.
No creé este increíble proyecto de muestra, simplemente lo estoy llamando la atención de la comunidad. Para obtener más información y un enlace al proyecto comprimido, lea Richard " Doctyper " Toda la publicación de Herrara en Posicionamiento fijo en Mobile Safari .
Puede ser torpe, pero puede cambiar la posición del encabezado y pie de página sobre la parte superior del div a medida que el usuario se desplaza. De esta manera, su div principal no necesita ser desplazable. Sin embargo, no hay ayuda para nada (todavía) usando marcos.
Este es uno de los problemas más irritantes del navegador con el iPhone / touch, ojalá pudieras concentrarte en parte de la página como un navegador normal.
Para una referencia CSS solamente, la Safari CSS Reference probablemente tiene lo que estás buscando. Te interesará especialmente cualquier cosa que comience con " -webkit " o "-khtml" como esas son propiedades extendidas solo disponibles con WebKit como 3D y toques. Debería aplicarse también a Android.
Con JavaScript, el Introducción a los temas de programación DOM de WebKit y Referencia de la API DOM de WebKit son guías de acceso. Eche un vistazo a la demostración de la mesa de luz para copiar y pegar javascript en el manejo de sus toques como así es como resolvería esto.
He implementado iScroll en iphone y es realmente sencillo y rápido y puedes hacer lo que quieras. Las desventajas son que Android (1.6) se niega a desplazarse como yo quería y, a veces, bloquea otros javascript si hay alguno.
<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">
Agregarlos a su código html puede resolver su problema.
