Question

是否有一个简单的JavaScript解决方案，与设备和库无关？

我想在html元素中添加一个类，以便在可能的情况下将可滚动容器传递给移动设备。

这将是Modernizr采用的类似方法，检测功能支持而不是浏览器检测。我只是不想使用整个Modernizr框架。试图为移动项目保持JavaScript光。

谢谢！

Answer 1

它不完美，但我用它来检测-webkit-overflow-scrolling。

var overflowScrolling = typeof($("body")[0].style["-webkit-overflow-scrolling"]) !== "undefined";

然后我说如果不是overflow-scrolling和移动，那么我加载iScroll。

这意味着支持overflow: scroll但不支持-webkit-overflow-scrolling的设备仍会加载iScroll但这至少会提供原生滚动到iOS 5和现代android。

Answer 2

这是一个检查所有可能选项的解决方案，包括非供应商前缀属性，并且对jQuery或Modernizr等库没有任何依赖性：

function hasOverflowScrolling() {
    var prefixes = ['webkit', 'moz', 'o', 'ms'];
    var div = document.createElement('div');
    var body = document.getElementsByTagName('body')[0];
    var hasIt = false;

    body.appendChild(div);

    for (var i = 0; i < prefixes.length; i++) {
        var prefix = prefixes[i];
        div.style[prefix + 'OverflowScrolling'] = 'touch';
    }

    // And the non-prefixed property
    div.style.overflowScrolling = 'touch';

    // Now check the properties
    var computedStyle = window.getComputedStyle(div);

    // First non-prefixed
    hasIt = !!computedStyle.overflowScrolling;

    // Now prefixed...
    for (var i = 0; i < prefixes.length; i++) {
        var prefix = prefixes[i];
        if (!!computedStyle[prefix + 'OverflowScrolling']) {
            hasIt = true;
            break;
        }
    }

    // Cleanup old div elements
    div.parentNode.removeChild(div);

    return hasIt;
}

alert(hasOverflowScrolling());

Answer 3

这是一个非常好的问题。不幸的是，目前似乎无法可靠地检查overflow: scroll支持。

Filament group有一个polyfill，您可以在项目中使用它（参见http://filamentgroup.github.io/Overthrow/），但根据他们自己：

麻烦的是，测试溢出很难 - 也许是不可能的   支持[...]

出于必要，Overthrow会检查用户代理   string将当前和未来版本的移动设备列入白名单   已知具有本机溢出支持的平台，但不支持   在检查更可靠和不可知的手段之前：即，   iOS5（现在也是Chrome Android的！）触摸滚动CSS属性，   和广泛的桌面浏览器推理测试（没有触摸事件支持   屏幕宽度大于1200px）

检测移动浏览器是否支持溢出：滚动

3 个答案: