Comment détecter automatiquement le besoin d'iScroll?

Le projet iScroll fournit le " overflow:scroll pour WebKit mobile" et a été lancé

[…] car Webkit pour iPhone ne fournit pas une manière native de faire défiler le contenu à l'intérieur d'une taille fixe (largeur / hauteur) div. Donc, fondamentalement, il était impossible d'avoir un en-tête / pied de page fixe et une zone centrale de défilement.

  • Access-Control-Allow-Origin Error à Android 4.1
  • La situation ext4 / fsync n'est pas claire dans Android (Java)
  • Android - y a-t-il un rappel qui s'appelle immédiatement après onResume ()?
  • AdB extrayez plusieurs fichiers
  • Android - image locale dans le webview
  • Service Android pour PubNub
  • Nous avons développé une application Web mobile, utilisant une conception adaptée (etc.), qui utilise une mise en page qui montre parfois un en-tête fixe et un pied de page sur les appareils mobiles, en fonction de la bibliothèque de mise en page , qui utilise à son tour la fonction angular-iscroll .

    Vous pouvez essayer la démo de mise en page principale sur le bureau et le mobile, et essayer d'activer ou désactiver l'utilisation de iScroll . Sur le défilement du bureau, les différentes zones devraient fonctionner avec et sans iScroll (étant donné que la fenêtre n'est pas trop élevée pour que le défilement ne soit pas nécessaire); Sur le mobile, cependant, si le défilement fonctionne sans iScroll dépend du type et de la version du navigateur.

    Les versions récentes du navigateur Safari mobile et les navigateurs Android ont commencé à supporter le overflow:scroll éléments div tels que décrits ci-dessus. Par conséquent, certains navigateurs ont encore besoin d'utiliser iScroll pour fonctionner, alors que d'autres navigateurs ne le font pas. Parce que l'utilisation d'iScroll introduit certains problèmes, comme une gestion appropriée des clics et des événements tactiles, j'aimerais désactiver iScroll dans tous les navigateurs qui n'en ont pas besoin.

    J'aimerais ajouter un support dans angular-iscroll ou core-layout pour détecter automatiquement s'il est nécessaire d'utiliser iScroll ou non pour chaque navigateur ouvrant la page. Je connais les bibliothèques de détection de fonctionnalités comme modernizr , mais il semble difficile de déterminer le besoin d'iScroll en fonction de la détection des fonctionnalités.

    Est-ce que quelqu'un sait comment une telle détection automatique peut être mise en œuvre?

    Une autre possibilité est d'utiliser une liste blanche / noire et de vérifier la version du navigateur, mais dans ce cas, je me demande si quelqu'un a un ensemble de règles fiables pour déterminer correctement la nécessité d'utiliser iScroll en fonction de la chaîne utilisateur-agent?

    Divulgation: Je suis l'auteur de l' angulaire-iscroll et de la mise en page du noyau .

    Mise à jour 2016-01-10:

    Comme personne n'a encore suggéré de réponse, j'ai pensé que je pourrais partager quelques idées sur lesquelles je pouvais résoudre ceci:

    • S'il est difficile de mettre en œuvre une solution au problème ci-dessus grâce à une véritable détection des fonctionnalités, une manière possible pourrait être d'utiliser platform.js , une bibliothèque de détection de plate-forme qui fonctionne sur presque toutes les plates-formes JavaScript. En incluant le script platform.js , vous obtenez facilement l'accès aux informations sur le navigateur actuel, telles que

       // 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)' 

      Qui pourrait être utilisé pour faire correspondre un ensemble de règles. Cependant, alors le
      Le problème devient ce que ces règles devraient être , afin d'éviter de désactiver iScroll pour les navigateurs qui ont besoin d'iScroll pour fonctionner et d'éviter de faire basculer iScroll pour les navigateurs qui n'en ont pas besoin.

    • Une autre façon pourrait être d'exploiter cela, compte tenu d'un div défilant avec des contenus plus élevés que la hauteur du div , alors la zone de défilement devrait défiler lors du balayage, et on pourrait essayer de détecter si cela se produit ou non.
      Considérez ce scénario: supposons que vous démarrez avec iScroll désactivé . Maintenant, si l'utilisateur essaie de faire défiler le contenu de la div , mais le contenu ne bouge pas, alors peut-être on pourrait conclure que l'on doit activer iScroll pour que div -scrolling fonctionne? Comment cela serait-il mis en œuvre tout en offrant une expérience utilisateur relativement fluide? Cela pourrait dépendre de la rapidité avec laquelle on peut détecter que le contenu aurait dû rouler mais pas?

    Si quelqu'un peut proposer des solutions robustes basées sur l'une de ces idées (ou une combinaison d'entre elles), je suis content d'aider.

    De plus, je me demande pourquoi personne ne tente de trouver une réponse; Même pas un commentaire qui dit que c'est trop difficile / trivial / non pertinent / étrange / dépassé?

  • Lancer une application sms avec une intention
  • Comment créer un spinner avec des images plutôt que du texte?
  • Importer le projet de test Android dans Eclipse à partir de Control de version
  • Capture de pages de redirections via javascript dans Android's WebView
  • Comment faire un ActionBar comme Google Play qui s'efface lorsque vous faites défiler
  • Menu déroulant / popup personnalisé Android
  • 2 Solutions collect form web for “Comment détecter automatiquement le besoin d'iScroll?”

    Comme personne d'autre n'a encore trouvé de solution, j'ai pensé que je pourrais partager le mien, et j'espère que cette réponse peut être modifiée et améliorée pour décider plus précisément de quels périphériques iScroll doit être utilisé.

    J'ai écrit l'extension Modernizr suivante qui utilise platform.js pour décider si le overflow: scroll natif overflow: scroll div est supporté:

     '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')); 

    compareVersion() , par Jon Papaioannou, est défini dans Comment comparer le numéro de version du logiciel en utilisant js? (Un seul numéro) ou ce document avec documentation .

    Maintenant, cette méthode n'a malheureusement pas recours à la détection des fonctionnalités, mais peut-être serait-elle encore améliorée si quelqu'un a de plus amples informations sur les appareils problématiques ou sur les versions du navigateur.

    Mise à jour 2016-01-27

    Grâce à un généreux parrainage «gratuit pour Open Source» de BrowserStack , j'ai pu tester la mise en page de base et, par conséquent, l' angular-iscroll , avec une pléthore d'appareils et de navigateurs. Sur la base de ces tests, j'ai raffiné les règles de détection automatique d' angular-iscroll et le code ci-dessus.

    Mise à jour 2016-01-25

    Depuis la version 3.1.0, angular-iscroll a cette fonctionnalité intégrée. Le résultat de la détection automatique est exposé via les indicateurs booléens iScrollService.state.autoDetectedUseNativeScroll et iScrollServiceProvider.useNativeScroll ; Où ce dernier est disponible pendant la phase de config de l'initialisation de l'application.

    Si vous avez seulement besoin d'implémenter un en-tête collant. Vous devez trouver le système. En fait, le dernier support du navigateur du système Ios (8 ou supérieur), vous pouvez utiliser "position: collant" pour implémenter une tête collante. C'est très pratique et aucun effet secondaire.

    Autre plate-forme (IOS Android et ancien), vous avez besoin de quelque chose comme 'Iscroll', vous pouvez utiliser platform.js comme vous l'avez mentionné ou vous pouvez simplement vérifier 'useragent'. Il contient tout ce dont vous avez besoin.

    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.