Javascript 在浏览器中测试对overflow-y:auto的支持

我想测试浏览器中是否支持特定的css属性。对于css属性，我可以像

var overflowSupport = document.createElement("detect").style["overflow-y"] === ""

但是，如果我必须检查某个特定的类或属性，该怎么办呢。例如，我想测试对的支持

overflow-y:auto

并在支持的地方使用它滚动一个大div，在其他地方使用iScroll

---

我该怎么做？请提供帮助。

当为dom样式指定无效值时，它将被拒绝。因此，这应该是可行的：

var testOverflowEl = document.createElement( "x-test" );
testOverflowEl.style.overflowY = "auto";
var overflowSupport = testOverflowEl.style.overflowY === "auto";

---

这是一个老问题，但我想在这里分享我的发现，特别是因为Inkbug提供的代码示例并不像您预期的那样工作

溢出属性支持

overflow-y

从CSS2.1时代就开始出现了（不过最近它已经标准化了，）。出于这个原因，这是非常体面的

现在，您要问的是，当我们在特定元素上指定

overflow-y:scroll

时，滚动行为是否真正起作用

这种行为是最近在移动浏览器中引入的。更准确地说，苹果在iOS 5中引入了一个供应商前缀

-webkit

（见第176页，共页）

但我找不到Android的具体信息

关于支持

溢出滚动

（供应商是否加前缀），我可以说：

• 最新的nexus7（Android 4.1.1）：是的
• 安卓2.3.x：没有
• iOS>=5:是
• iOS<5：否

滚动溢出的特征检测 如果您想为元素提供滚动行为，我建议使用特性检测

这里展示了如何检测此

滚动溢出

属性（它已被删除）。如果您不想使用Modernizer，这里有一个更简单的版本，它的功能几乎相同：

/**
 * Test to see if overflow-scrolling is enabled.
 */

var hasCSSProperty = function(prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(document.body, null)[prop];
    } else {
        return document.body.currentStyle[prop];
    }
};

var supportOverflowScrolling = function() {
    if (hasCSSProperty('overflow-scrolling') ||
        hasCSSProperty('-webkit-overflow-scrolling') ||
        hasCSSProperty('-moz-overflow-scrolling') ||
        hasCSSProperty('-o-overflow-scrolling')) {
        return true;
    } else {
        return false
    }
};

奥巴马的回答当然值得打勾

无论如何，也要考虑使用<强> ./P> 使用它们的

addTest

和

testAllProps

API函数，您可以轻松检查css属性支持：

Modernizr.addTest('overflow-y',function(){
    return Modernizr.testAllProps('overflowY'); /* camel case here */
});

然后您可以使用JavaScript进行检查：

if(Modernizr.overflowY){
    /* do something if supported */
}

但它还将向

标记添加一个类，以便您也可以在CSS上自定义规则：

.overflowY #element {
    /* style for browsers supporting overflow-y */
}
.no-overflowY #element {
    /* style for browsers NOT supporting overflow-y */
}

---

是否有任何“现代”浏览器不支持它？

overflow

作为CSS2的一部分，在所有浏览器中都受支持-您的具体意思是

overflow-x

和

overflow-y

？如果是，您应该编辑标题。overflow-y:auto在基础上有android 2.3.3的kindle浏览器中不受支持。@ghostCoder谢谢。我不知道。请记住。

overflow-y

不是CSS2的一部分。它是在CSS2时由Microsoft创建的，但只建议在CSS2.1之后进行标准化。你是对的。Overflow属性已经存在了一段时间，从中，我们看到“上面的段落来自CSS 2.1。需要检查Overflow-x/y的引入是否改变了什么。”