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

【问题标题】：Detect if mobile browser supports overflow:scroll检测移动浏览器是否支持溢出：滚动
【发布时间】：2012-03-15 16:28:59
【问题描述】：

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

我想为 html 元素添加一个类，这样我就可以在可能的情况下将可滚动容器传送到移动设备。

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

谢谢！

【问题讨论】：

请对你的问题多加努力，
可能重复：stackoverflow.com/questions/3343311/…。另请参阅：lostmonocle.com/post/870842095/…
我在想类似的东西，但找不到它：stackoverflow.com/questions/3911866/…
这是一个有效的问题。上面的例子检查 position: fixed 和滚动条是否可见。两个示例都没有检查溢出：滚动支持。
也许这对你没有任何帮助，但是一旦你检测到浏览器不支持overflow:scroll，这里有一个我用作后备的库：cubiq.org/iscroll-4。

标签： javascript css mobile

【解决方案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 提供了本机滚动功能。

【讨论】：

您可能想用下划线替换连字符？
这会检查是否支持-webkit-overflow-scrolling，而不是检查overflow:scroll 是否在浏览器中工作。
@speedarius 这就是第一句话所说的。

【解决方案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());

【讨论】：

这会检查浏览器是否支持-*-overflow-scrolling，它控制移动设备中的“动量”滚动。它不检查overflow:scroll 是否在浏览器中工作。例如，在 Android overflow:scroll 根本不起作用。我相信这就是问题所在。
这让我到处都是假的

【解决方案3】：

这是一个很好的问题。不幸的是，目前似乎没有办法可靠地检查 overflow: scroll 支持。

Filament 组对此有一个 polyfill，您可能希望在您的项目中使用它（参见 http://filamentgroup.github.io/Overthrow/），但根据他们自己：

问题是，很难——也许不可能——测试溢出支持[...]

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

【讨论】：