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

是否有一个简单的JavaScript解决方案可以解决这个问题，它与设备和库无关

我想在html元素中添加一个类，以便在可能的情况下将可滚动的容器交付给mobile

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

---

谢谢

这并不完美，但我正在使用它来检测-webkit溢出滚动

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

然后我说如果不是

溢出滚动

和mobile，那么我就加载iScroll

---

这意味着支持

overflow:scroll

但不支持

-webkit overflow scrolling

的设备仍将加载iScroll，但这至少为iOS 5和现代android提供了本机滚动功能。

这里有一个解决方案，可以检查所有可能的选项，包括非供应商前缀属性，并且不依赖于jQuery或Modernizer之类的库：

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

函数hasOverflowScrolling（）{
var前缀=['webkit'、'moz'、'o'、'ms']；
var div=document.createElement（'div'）；
var body=document.getElementsByTagName（'body'）[0]；
var hasIt=假；
附体儿童（div）；
for（var i=0；i

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

溢出：scroll

支持

灯丝组有一个用于此目的的polyfill，您可能希望在项目中使用它（请参见），但根据其本身：

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

出于必要，Turport检查用户代理 字符串以将当前和未来版本的mobile设置为白名单 已知具有本机溢出支持的平台，但不支持 在通过更可靠和不可知的方法进行检查之前：， iOS5（现在还有Chrome Android！）触摸滚动CSS属性， 和广泛的桌面浏览器推理测试（无触摸事件支持 屏幕宽度大于1200px）

---

请在您的问题上多加努力，可能重复：。另请看：我想的更像这样，但很难找到：这是一个有效的问题。上面的示例检查位置：固定和滚动条是否可见。这两个示例都没有检查溢出：滚动支持。这可能对您没有任何帮助，但一旦您检测到浏览器不支持

溢出：滚动

，我就使用了一个库作为备用：。您可能想用下划线替换连字符？这将检查是否支持

-webkit溢出滚动

，不包括

溢出：滚动

是否在浏览器中工作。@speedarius这是第一句话所述。这检查浏览器是否支持

-*-溢出滚动

，它控制移动设备中的“动量”滚动。它不会检查

溢出：滚动
是否在浏览器中工作。例如，在Android<3.0中，
溢出：滚动
根本不起作用。我相信这就是问题所在。这让我处处都是假的