更新2016-01-10：

Question

iScroll项目提供了“overflow:scroll for mobile WebKit”，并已启动

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

我们开发了一个适合移动设备的Web应用程序，使用响应式设计（等），它使用的布局有时会在移动设备上显示固定的页眉和页脚，基于core-layout库，而使用angular-iscroll。

您可以在桌面设备和移动设备上试用core-layout demo，然后尝试打开和关闭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：

由于还没有人提出任何答案，我认为我可以分享一些我如何解决这个问题的想法：

如果通过 true 功能检测很难实现上述问题的解决方案，一种可能的方法是利用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。
< / LI>
另一种方法可能是利用它，给定一个可滚动的div，其内容高于div的高度，那么滚动区应该滑动时滚动，可以尝试检测是否发生这种情况考虑这种情况：让我们假设您开始使用iScroll off 。现在，如果用户试图滚动div的内容，但内容不会移动，那么也许可以得出结论，必须在上为{{1}转动iScroll 滚动工作？如何在提供相对流畅的用户体验的同时实施？这可能取决于人们可以检测到内容应该滚动的速度但是没有？

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

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

Answer 1

由于还没有人提出解决方案，我认为我可以分享我的解决方案，希望这个答案可以编辑和改进，以便更准确地决定必须使用哪些设备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'));

Jon Papaioannou在How to compare software version number using js? (only number)或gist with documentation中定义了compareVersion()。

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

更新2016-01-27

感谢来自BrowserStack的慷慨“免费开源”赞助，我已经能够使用大量设备测试core-layout，从而angular-iscroll浏览器。根据这些测试，我已经完善了angular-iscroll的自动检测规则以及上述代码。

更新2016-01-25

由于版本3.1.0 angular-iscroll内置了此功能。自动检测的结果通过布尔标志iScrollService.state.autoDetectedUseNativeScroll和iScrollServiceProvider.useNativeScroll公开;在应用程序初始化的config阶段，后者可用。

Answer 2

如果您只需要实现一个粘性标头。你需要找出系统。实际上，最新的Ios系统（8或以上）browser support，您可以使用“position：sticky”来实现粘性头。它非常方便，没有副作用。

其他平台（机器人和旧的IOS），你需要像'Iscroll'这样的东西，你可以使用你所提到的platform.js，或者你可以简单地检查'useragent'。它包含您需要的一切。

如何自动检测iScroll的需求？

更新2016-01-10：

2 个答案:

更新2016-01-27

更新2016-01-25