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

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

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

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

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

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

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

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

Раскрытие информации: Я являюсь автором как angular-iscroll, так и core-layout.

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

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

Если трудно реализовать решение вышеуказанной проблемы с помощью истинного обнаружения функций, одним из возможных способов может быть использование platform.js, платформы которая работает практически на всех платформах JavaScript. Включив platform.js script, вы легко получите доступ к информации о текущем браузере, например
```
// 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, но содержимое не перемещается, возможно, можно сделать вывод, что нужно перевернуть iScroll для div -scrolling для работы? Как это будет реализовано, обеспечивая при этом относительно гладкий пользовательский интерфейс? Это может зависеть от того, насколько быстро можно обнаружить, что содержимое должно прокручиваться, но не было?

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

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

Ответ 1

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

Я написал следующее расширение Modernizr, которое использует platform.js, чтобы решить, поддерживается ли прокрутка native 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, определяется в Как сравнить номер версии программного обеспечения с помощью js? (только номер) или gist с документацией.

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

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

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

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

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

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

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

Ответ 1

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

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

Ответ 2