¿Cómo detectar automáticamente la necesidad de iScroll?

El proyecto iScroll proporciona el " overflow:scroll para WebKit mobile" y se inició

[…] porque el webkit para iPhone no proporciona una forma nativa de desplazar contenido dentro de un tamaño fijo (ancho / alto) div. Entonces, básicamente, era imposible tener un encabezado / pie de página fijo y un área central desplazable.

Hemos desarrollado una aplicación web amigable para dispositivos mobilees, que usa un layout receptivo (etc.), que usa un layout que a veces muestra un encabezado y pie de página fijo en los dispositivos mobilees, basado en la biblioteca de layout central , que a su vez usa angular-iscroll .

Puede probar la demostración de layout de núcleo en escritorio y mobile, e intentar activar y desactivar el uso de iScroll . En el desplazamiento del escritorio, las diferentes áreas deberían funcionar tanto con iScroll como sin él (dado que la window no es demasiado alta para que el desplazamiento no sea necesario); en el mobile, sin embargo, si el desplazamiento funciona sin iScroll depende del tipo y la versión del browser.

Las versiones recientes del browser Safari mobile y los browseres Android han comenzado a admitir el overflow:scroll para elementos div tamaño fijo como se describe anteriormente. Por lo tanto, algunos browseres todavía necesitan el uso de iScroll para funcionar, mientras que otros browseres no lo hacen. Debido a que el uso de iScroll presenta algunos problemas propios, como el clic adecuado y el event handling events táctiles, me gustaría desactivar iScroll en todos los browseres que no lo necesitan.

Me gustaría agregar soporte en angular-iscroll o core-layout para detectar automáticamente si hay alguna necesidad de usar iScroll o no para cada browser que abre la página. Sé acerca de las bibliotecas de detección de características como modernizr , pero parece difícil determinar la necesidad de iScroll basado en la detección de características.

¿Alguien sabe cómo se puede implementar dicha autodetección?

Otra posibilidad es usar una list blanca / negra y verificar la versión del browser, pero en ese caso me pregunto si alguien tiene un set de reglas confiable para determinar correctamente la necesidad de usar iScroll en function de la cadena de agente de usuario.

Divulgación: Soy el autor de angular-iscroll y layout de núcleo .

Actualización 2016-01-10:

Como nadie ha sugerido ninguna respuesta todavía, pensé que podría compartir algunas ideas que he tenido sobre cómo resolver esto:

  • Si es difícil implementar una solución al problema anterior a través de una verdadera detección de características, una posible manera podría ser utilizar platform.js , una biblioteca de detección de plataforma que funciona en casi todas las plataforms de JavaScript. Al include el script platform.js , puede acceder fácilmente a la información sobre el browser actual, como por ejemplo

     // On an iPad platform.name; // 'Safari' platform.version; // '5.1' platform.product; // 'iPad' platform.manufacturer; // 'Apple' platform.layout; // 'WebKit' platform.os; // 'iOS 5.0' platform.description; // 'Safari 5.1 on Apple iPad (iOS 5.0)' 

    que se podría usar para hacer coincidir contra un set de reglas. Sin embargo, luego el
    el problema se convierte en lo que deberían ser esas reglas , para evitar apagar iScroll para los browseres que necesitan iScroll para funcionar, y para evitar activar iScroll para browseres que no lo necesiten.

  • Otra forma podría ser explotar eso, dado un div desplazable con contenidos más altos que la altura del div , entonces el área de desplazamiento debe desplazarse cuando se desliza, y uno podría tratar de detectar si eso sucede o no.
    Considere este escenario: supongamos que comienza con iScroll desactivado . Ahora, si el usuario intenta desplazarse por los contenidos del div , pero los contenidos no se mueven, ¿tal vez se podría concluir que uno debe activar iScroll para que div -scrolling funcione? ¿Cómo se implementaría eso mientras se proporciona una experiencia de usuario relativamente suave? Podría depender de qué tan rápido se puede detectar que los contenidos deberían haberse desplazado pero no lo hicieron?

Si alguien puede encontrar soluciones sólidas basadas en una de esas ideas (o una combinación de ellas), entonces estoy feliz de ayudar.

Además, me pregunto por qué nadie trata de encontrar una respuesta; ni siquiera un comentario que diga que esto es demasiado difícil / trivial / irrelevante / extraño / anticuado?

Como nadie más ha llegado a una solución, pensé que podría compartir la mía y, con suerte, esta respuesta puede editarse y mejorarse para decidir con mayor precisión qué dispositivos se deben usar iScroll.

Escribí la siguiente extensión de Modernizr que hace uso de platform.js para decidir si hay overflow: scroll nativo overflow: scroll se admite el desplazamiento de overflow: scroll div :

 'use strict'; var platform = require('platform'), Modernizr = require('modernizr'); function _isChromeMobile(platform) { return platform.name === 'Chrome Mobile'; } function _isAndroidBrowserWithRecentOS(platform) { return platform.name === 'Android Browser' && versionCompare(platform.os.version, '4.0.4') >= 0; } module.exports = function _useNativeScroll(platform) { if (platform.name === 'Opera Mini') { return false; } if (platform.name === 'IE Mobile') { return versionCompare(platform.version, '11.0') >= 0 } switch (platform.os.family) { case 'Android': // In Chrome we trust. return _isChromeMobile(platform) || _isAndroidBrowserWithRecentOS(platform); case 'iOS': // Buggy handling in older iOS versions. return versionCompare(platform.version, '5.1') >= 0; default: // Assuming desktop or other browser. return true; } }; Modernizr.addTest('usenativescroll', require('modernizr-usenativescroll')); 

Donde compareVersion() , de Jon Papaioannou, se define en Cómo comparar el número de versión de software usando js? (solo número) o esta información con documentation .

Ahora, este método desafortunadamente no utiliza la detección de características, pero es de esperar que se mejore aún más si alguien presenta más datos sobre dispositivos problemáticos o versiones del browser.

Actualiza 2016-01-27

Gracias a un generoso patrocinio "gratuito para Open Source" desde BrowserStack , pude probar el layout del núcleo y , por lo tanto, angular-iscroll , con una gran cantidad de dispositivos y browseres. Sobre la base de esas testings, he perfeccionado las reglas de detección automática de angular-iscroll y el código anterior.

Actualización 2016-01-25

Desde la versión 3.1.0 angular-iscroll tiene esta function incorporada. El resultado de la detección automática se expone a través de las banderas booleanas iScrollService.state.autoDetectedUseNativeScroll y iScrollServiceProvider.useNativeScroll ; donde este último está disponible durante la fase de config de la initialization de la aplicación.

Si solo necesita implementar un encabezado fijo. necesitas encontrar el sistema. En realidad, el último soporte del browser del sistema IOS (8 o superior), puede usar "position: sticky" para implementar una cabeza adhesiva. Es muy conveniente y no tiene efecto secundario.

Otra plataforma (Android y viejo IOS), necesitas algo así como 'Iscroll', puedes usar platform.js mientras lo haces o simplemente puedes marcar 'useragent'. Contiene todo lo que necesitas.