javascript - 测试溢出-y :auto returning true on android < 3 even though it doesnt work

Question

我正在为 android 开发一个网络应用程序。在某个地方，我需要确定浏览器是否支持 overflow-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;

});

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

Answer 1

你可以试试这个:

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

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

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

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