2

我正在为android开发一个webapp。在某个地方，我需要查找浏览器是否支持溢出-y:auto，因为我需要滚动一个 div。但是在android < 3
中对此返回 true 的测试，告诉它受支持，但是在使用时它不能按照预期的方式工作，即 div 与

overflow-y:auto

不滚动。

是否有任何可靠的方法可以查看浏览器是否支持此属性。我使用modernizr编写了这个测试，但它总是返回true，这意味着它支持。

Modernizr.addTest('overflowauto', function(){
var bool = false;
var testProp = "overflow-y";
var testVal = "auto";
var styles = Modernizr._prefixes.join(testProp + ":" + testVal + "; ");
var ret = true;
ret =  Modernizr.testStyles('#modernizr { '+styles+' }', function(elem, rule){
    for(var i = 0; i < Modernizr._prefixes.length; i++) {
        bool = (window.getComputedStyle ?
                getComputedStyle(elem, null) :
                elem.currentStyle)[Modernizr._prefixes[i] + testProp] == testVal;

        if(bool) break;
    }

    return bool;

});
return ret;

});

但很明显，当我使用它时它不起作用。请告诉我一个可靠的方法来确定该物业是否可以安全使用，或者我能做些什么。

4

1 回答 1

2

你可以试试这个：

Modernizr.addTest("overflowscrolling",function(){
    return Modernizr.testAllProps("overflowScrolling");
});

然后检查Modernizr 将插入到DOM 元素中的overflowscrollingor类。这似乎适用于 iOS 和 Android 设备。（或者直接检查 的值。）no-overflowscrollinghtmlModernizr.overflowscrolling

因为overflowscrolling特定于某些浏览器/设备（例如，最近的 iPhone），所以我Modernizr.touch也会检查。如果它不是触摸设备，我认为它可以处理溢出滚动。由于 Android 是触摸设备，它们将被测试，Modernizr.overflowscrolling但您不必测试，例如，笔记本电脑上的 Chrome（这将返回 false，但可以处理overflow:auto得很好）。

所以测试可能不完美，但它似乎对我所测试的所有我关心的用例做了正确的事情：所有现代桌面浏览器、最近的 iPhone 和 Android 2.X 设备。如果您要支持的设备/浏览器范围更广，则必须对其进行测试并进行适当的调整。

于 2012-05-08T05:55:44.970 回答