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 设备。如果您要支持更广泛的设备/浏览器，则必须对它们进行测试并进行适当的调整。