检测移动浏览器是否支持overflow:scroll。

Question

是否有一种简单的JavaScript解决方案，不受设备和库的限制？

我想向html元素添加一个类，以便在可能时为移动设备提供可滚动容器。

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

谢谢！

- ackernaut

---

请在提问时多下些功夫。 - Triode

可能重复：http://stackoverflow.com/questions/3343311/can-javascript-detect-when-scrollbars-are-unavailable-i-e-on-mobile-browsers。另请参见：http://lostmonocle.com/post/870842095/geeky-stuff-using-jquery-to-check-if-scrollbars-are - Prescott

我在考虑更像这样的东西，但是找不到：https://dev59.com/VlHTa4cB1Zd3GeqPORPd - ackernaut

这是一个有效的问题。上面的示例检查了位置：固定和滚动条是否可见。但是，两个示例都没有检查溢出：滚动支持。 - respectTheCode

也许这对您没有帮助，但是一旦您检测到浏览器不支持overflow:scroll，这里有一个库，我已经用作备选方案：http://cubiq.org/iscroll-4. - Joshua Dwire

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 提供了原生滚动。

- respectTheCode

---

您可能希望将破折号替换为下划线？ - donquixote

这个检查是否支持-webkit-overflow-scrolling，而不是浏览器中overflow:scroll是否可用。 - speedarius

@speedarius，这就是第一句话所说的。 - respectTheCode

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());

- Husky

---

这段代码检查浏览器是否支持 -*-overflow-scrolling，它控制移动设备上的“动量”滚动。但它不检查浏览器是否支持 overflow:scroll。例如，在 Android < 3.0 中，overflow:scroll 简单地不起作用。我相信这就是问题所在。 - speedarius

这总是给我一个假的结果。 - Gino

Answer 3

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

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

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

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

- Grodriguez