2011-07-01 5 views
8

Creé una aplicación compleja de formularios sobre datos móviles y ahora estoy buscando una solución para mantener la posición del título y la barra de pie de página. En mi dummy, que se ha desarrollado y probado con Chrome y Safari en mi escritorio, simplemente puse el encabezado y el pie de página de forma absoluta, así como la sección de contenido, cuya altura es establecida por JavaScript en el evento de cambio de tamaño de Windows.Buscando una alternativa para iScroll (Desplazamiento de Div en iOS/Webkit)

No es una forma adecuada para el mundo de los dispositivos móviles, ya que el desbordamiento: automático no es compatible con WebKit para dispositivos móviles.

Probé algunas cosas por mi cuenta y también eché un vistazo a iScroll. De hecho, iScroll se estrelló safari en mi iPad, mientras que la aplicación sin ese componente funciona sin problemas. Tengo muchas formas relativamente complejas, lo que puede ser un desafío para iScroll, que no se puede ganar, creo.

Así que estoy buscando otras maneras de lograr mi objetivo (persistir encabezado y pie de página) sin dejar que el usuario use dos dedos para desplazarse (de hecho, casi nadie conoce ese "truco").

¿Alguna sugerencia?

Gracias!

Respuesta

14

Así que hay tres soluciones comúnmente mencionadas:

  1. iScroll
  2. YUI ScrollView
  3. Scrollability

Son todos muy aseado para desplazarse a través de las listas de sencillos. Pero nadie realmente funciona si su propósito es manejar páginas completas con algo más que una simple lista, por ejemplo, cuadros de diálogo complejos con formularios dinámicos, etc.

Acabo de decidir darme por vencido y esperar un año: Apple ha anunciado recientemente su apoyo a la posición: fijo y desbordamiento: desplazamiento, que revolucionará esta parte y resolverá todos los problemas que tenemos hoy.

Hoy recordé un sitio web de una empresa en nuestro edificio aquí en Munich, lo abrí con el iPad, y de hecho, tenía una sección de noticias desplazables en su página principal. Así que miré dentro y vi que está usando ... tadaaa ... jScrollPane.

No creo que jScrollPane haya sido desarrollado para usarlo en dispositivos móviles, pero también ha sido optimizado para ese propósito. Simplemente funciona en mi iPad, mi Android 2.3 y también en la última versión de Opera Mobile.

No se siente como desplazarse de una aplicación nativa en un dispositivo móvil, sino que le permite ver una barra de desplazamiento completamente personalizable, Ir al inicio y al BUTTOM y, lo que es más importante, para desplazarse con un dedo.

Muy bonito.

+1

Inicialmente estaba usando iScroll, pero estaba en conflicto con fullCalendar. Más tarde probé YUI ScrollView y Scrollability, pero lamentablemente no pude hacer que funcionaran en mi proyecto ... ¡pero jScrollPane funcionaba como un amuleto! Gracias. –

+2

Luché con iScroll 4 durante meses, 30 segundos con jscrollPane y mi html es más ligero. –

11

Mobile webkit ahora admite el desplazamiento utilizando solo CSS. Crear una clase de 'desplazamiento' y añadir las siguientes reglas:

.scrollable { 
     overflow-y: scroll; 
     -webkit-overflow-scrolling: touch; 
    } 

Añadir su clase 'desplazamiento' a cualquier elemento de bloque que requiere el desplazamiento. Solo Webkit.

+0

sí, que se ha introducido con iOS 5 (bastante tiempo después de que lo solicité el verano pasado) –

+1

He utilizado este enfoque y eso es lo que me llevó a esta publicación. Es horrible. Los eventos que se activan son totalmente impredecibles, por lo que es difícil usarlos en situaciones graves en las que se preocupe cuando el usuario deja de desplazarse. – Kir

1

https://github.com/filamentgroup/Overthrow/

solución basada polyfill ligero que vamos a navegadores modernos con desbordamiento: desplazarse apoyo hagan lo suyo.

Todavía en la fase inicial de desarrollo, pero funciona bastante bien en la base de usuarios afectados más grande (Android 2.2/2.3/iOS < 5).

Cuestiones relacionadas