Как автоматически определить необходимость iScroll?

Проект iScroll предоставляет « overflow:scroll для мобильного WebKit » и был запущен

[…], потому что webkit для iPhone не предоставляет собственный способ прокрутки содержимого в пределах определенного размера (ширины / высоты) div. Таким образом, в принципе невозможно было иметь фиксированный верхний / нижний колонтитул и прокручиваемую центральную область.

Мы разработали мобильное дружественное веб-приложение, используя отзывчивый дизайн (и т. Д.), Который использует макет, который иногда показывает фиксированный верхний и нижний колонтитулы на мобильных устройствах на основе библиотеки основного макета , которая, в свою очередь, использует угловое iscroll .

Вы можете попробовать демо-версию основного макета на настольном и мобильном устройствах и попытаться включить и выключить iScroll . При прокрутке рабочего стола разные области должны работать как с iScroll, так и без него (при условии, что окно не слишком высокое, чтобы прокрутка не была необходима); На мобильных устройствах, однако, работает ли прокрутка без iScroll, зависит от вида и версии браузера.

Недавние версии мобильного браузера Safari и браузеры Android начали поддерживать overflow:scroll для таких элементов div фиксированного размера, как описано выше. Поэтому некоторым браузерам по-прежнему необходимо использовать iScroll для работы, в то время как другие браузеры этого не делают. Поскольку использование iScroll вводит некоторые проблемы на свой счет, например, надлежащую обработку кликов и сенсорных событий, я хотел бы отключить iScroll во всех браузерах, которые ему не нужны.

Я хотел бы добавить поддержку в угловом икролле или ядре-макете для автоматического обнаружения, если есть необходимость использовать iScroll или нет для каждого браузера, открывающего страницу. Я знаю о библиотеках обнаружения функций, таких как modernizr , но, похоже, сложно определить необходимость iScroll на основе обнаружения функций.

Кто-нибудь знает, как такое автоматическое обнаружение может быть реализовано?

Другая возможность – использовать белый / черный список и проверить версию браузера, но в этом случае мне интересно, есть ли у кого-то надежное правило для правильного определения необходимости использования iScroll на основе строки пользовательского агента?

Раскрытие информации: Я являюсь автором как угло-икрелл, так и ядро-макета .

Обновление 2016-01-10:

Поскольку никто не предложил никаких ответов, я подумал, что могу поделиться некоторыми идеями, которые я имел о том, как это решить:

  • Если с помощью истинного обнаружения функций сложно реализовать решение этой проблемы, одним из возможных способов может быть использование платформы platform.js, библиотеки обнаружения платформы, которая работает практически на всех платформах JavaScript. Включив скрипт platform.js , вы легко получите доступ к информации о текущем браузере, таком как

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

    Которые могут использоваться для сопоставления с набором правил. Однако, тогда
    Проблема в том, какими должны быть эти правила , чтобы не отключать iScroll для браузеров, которым нужно работать iScroll, и избегать включения iScroll для браузеров, которые в этом не нуждаются.

  • Другой способ может заключаться в том, чтобы использовать это, учитывая прокручиваемый div с более высоким содержимым, который имеет высоту div , тогда область прокрутки должна прокручиваться при прокрутке, и можно попытаться определить, произойдет ли это.
    Рассмотрим этот сценарий: предположим, что вы начинаете с отключения iScroll. Теперь, если пользователь пытается прокрутить содержимое div , но содержимое не перемещается, возможно, можно сделать вывод, что для включения div scrolling необходимо включить iScroll? Как это будет реализовано, обеспечивая при этом относительно гладкий пользовательский интерфейс? Это может зависеть от того, насколько быстро можно обнаружить, что содержимое должно прокручиваться, но не так ли?

Если кто-то может придумать надежные решения, основанные на одной из этих идей (или их комбинации), то я просто рад помочь.

Кроме того, я удивляюсь, почему никто не пытается найти ответ; Даже комментарий, в котором говорится, что это слишком сложно / тривиально / нерелевантно / странно / устарело?

Поскольку никто еще не придумал решение, я думал, что смогу поделиться своим, и, надеюсь, этот ответ можно отредактировать и улучшить, чтобы более точно решить, для каких устройств следует использовать iScroll.

Я написал следующее расширение Modernizr, которое использует platform.js, чтобы решить, поддерживается ли собственное 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')); 

Где compareVersion() , Jon Papaioannou, определяется в compareVersion() Как сравнить номер версии программного обеспечения с помощью js? (Только номер) или этот документ с документацией .

Теперь этот метод, к сожалению, не использует обнаружение функции, но, надеюсь, будет дополнительно улучшен, если кто-нибудь придумает больше фактов о проблемных устройствах или версиях браузера.

Обновление 2016-01-27

Благодаря щедрому спонсорству «бесплатно для Open Source» от BrowserStack , я смог протестировать ядро-макет и, тем самым, угло-искролл с множеством устройств и браузеров. Основываясь на этих тестах, я уточнил правила автоматического определения angular-iscroll и приведенный выше код.

Обновление 2016-01-25

Начиная с версии 3.1.0 угловой-iscroll эта функция встроена. Результат автоматического обнаружения обнаруживается через булевские флаги iScrollService.state.autoDetectedUseNativeScroll и iScrollServiceProvider.useNativeScroll ; Где последний доступен во время фазы config инициализации приложения.

Если вам нужно только реализовать липкий заголовок. Вам нужно узнать систему. На самом деле, последняя поддержка браузера Ios (8 или выше), вы можете использовать «position: sticky» для реализации липкой головки. Это очень удобно и без побочных эффектов.

Другая платформа (Android и старый IOS), вам нужно что-то вроде «Iscroll», вы можете использовать platform.js по мере того, как вы оценили, или вы можете просто проверить «useragent». Он содержит все, что вам нужно.