如何自动检测iScroll的需求？

该iScroll项目提供了" overflow:scroll移动WebKit的 ",并开始

[...]因为用于iPhone的webkit不提供在固定大小(宽度/高度)div内滚动内容的本机方式.所以基本上不可能有一个固定的页眉/页脚和滚动的中心区域.

我们已经开发了一个移动友好的Web应用程序,使用响应式设计(等),使用的布局,有时在手机上显示一个固定的页眉和页脚的基础上,核心布局库,又使用角iscroll.

您可以在桌面和移动设备上试用核心布局演示,并尝试打开和关闭iScroll的使用.在桌面滚动时,不同区域应该使用和不使用iScroll(假设窗口不是太高,因此不需要滚动); 但是,在移动设备上,滚动是否在没有iScroll的情况下工作取决于浏览器的种类和版本.

最近版本的移动Safari浏览器和Android浏览器已经开始支持如上所述的overflow:scroll这种固定大小的div元素.因此,有些浏览器仍然需要使用iScroll才能工作,而其他浏览器则不需要.因为使用iScroll会引入一些问题,比如正确的点击和触摸事件处理,我想在所有不需要它的浏览器中关闭iScroll.

我想在angular-iscroll或core-layout中添加支持,以自动检测是否需要为打开页面的每个浏览器使用iScroll.我知道像modernizr这样的特征检测库,但似乎很难确定是否需要基于特征检测的iScroll.

有谁知道如何实现这种自动检测？

另一种可能性是使用白/黑名单并检查浏览器版本,但在这种情况下我想知道是否有人有一个可靠的规则集来正确确定是否需要使用基于用户代理字符串的iScroll？

披露:我是angular-iscroll和core-layout的作者.

既然没有人提出任何答案,我想我可以分享一些我如何解决这个问题的想法:

如果通过真正的特征检测很难实现上述问题的解决方案,一种可能的方法是利用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的浏览器打开iScroll.

另一种方法可能是利用它,给定一个div具有较高内容的可滚动div的高度,然后滚动区域应该在滑动时滚动,并且可以尝试检测是否发生这种情况.
考虑这种情况:让我们假设你开始关闭 iScroll .现在,如果用户试图滚动的内容div,但内容不动,那么也许人们可以得出结论,一个必须打开iScroll 上的div-scrolling工作？如何在提供相对流畅的用户体验的同时实施？它可能取决于可以检测到内容应该滚动但有多快的速度？

如果有人能够根据其中一个想法(或它们的组合)提出强有力的解决方案,那么我很乐意提供帮助.

另外,我想知道为什么没有人试图想出答案; 甚至没有评论说这太难/琐碎/不相关/奇怪/过时？

由于还没有其他人提出解决方案,我认为我可以分享我的解决方案,希望这个答案可以编辑和改进,以更精确地决定必须使用哪些设备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 在哪里定义如何使用js比较软件版本号？(仅限数字)或带有文档的这个要点.

现在,遗憾的是,这种方法不使用特征检测,但如果有人提出有关有问题的设备或浏览器版本的更多事实,可以希望进一步改进.

更新2016-01-27

感谢来自BrowserStack的慷慨"免费开源"赞助,我已经能够使用大量设备和浏览器测试核心布局,从而测试angular-iscroll.基于这些测试,我已经完善了两个angular-iscroll自动检测规则和上面的代码.

更新2016-01-25

从版本3.1.0开始,angular-iscroll内置了此功能.自动检测的结果通过布尔型标记暴露iScrollService.state.autoDetectedUseNativeScroll和iScrollServiceProvider.useNativeScroll; 在config应用程序初始化阶段,后者可用.