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

【问题标题】：testing support for overflow-y:auto in browsers在浏览器中测试对 overflow-y:auto 的支持
【发布时间】：2012-05-13 21:06:40
【问题描述】：

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

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

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

的支持

overflow-y:auto

并在支持的情况下使用它来滚动大 div，并在其他地方使用 iScroll。

我该怎么做？请帮忙。

【问题讨论】：

是否有不支持它的“现代”浏览器？
overflow 作为 CSS2 的一部分在所有浏览器中都受支持 - 您是指 overflow-x 和 overflow-y 吗？如果是这样，您应该编辑标题。
overflow-y:auto 在以 android 2.3.3 为基础的 Kindle 浏览器中不受支持。
@ghostCoder 谢谢。不知道那个。需要记住的一点。

标签： javascript jquery css cross-browser

【解决方案1】：

当为 dom 样式分配无效值时，它会被拒绝。因此这应该有效：

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

【讨论】：

【解决方案2】：

有点老问题，但我想我会在这里分享我的发现，特别是因为 Inkbug 提供的代码示例不能像您期望的那样工作。

溢出属性支持

overflow-y 从 CSS2.1 时代就已经存在（不过最近它已经标准化了，in the css3 spec）。因此，support on desktop browsers 非常不错。

现在，您要问的是，当我们在特定元素上指定 overflow-y: scroll 时，滚动行为是否真的有效。

这种行为是最近在移动浏览器中引入的。更准确地说，Apple 在 iOS 5 中以-webkit 供应商前缀引入了它（参见Apple's documentation 的第176 页）。

不过，我找不到适用于 Android 的具体信息。

关于支持overflow-scrolling（供应商前缀与否），我可以说些什么：

最新的 nexus7 (Android 4.1.1)：是的
Android 2.3.x：否
iOS >= 5：是
iOS

滚动溢出的特征检测

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

这里是a gist，展示了如何检测这个scrolling-overflow 属性（它一直是integrated in Modernizr since）。如果您不想使用 Modernizr，这里有一个更简单的版本，功能几乎相同：

/**
 * 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
    }
};

【讨论】：

overflow-y 不是 CSS2 的一部分。它是由微软在 CSS2 时创建的，但只是提议在 CSS2.1 之后标准化。
你是对的。溢出属性已经存在了一段时间，从css3 spec，我们读到“上面的段落来自CSS 2.1。需要检查overflow-x/y 的引入是否改变了任何东西。”

【解决方案3】：

Arnaud Brosseau 的回复肯定值得勾选。

无论如何，也可以考虑使用 Modernizr。

使用他们的 addTest 和 testAllProps API 函数，您可以轻松地检查任何 css 属性支持：

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

然后你可以用 JavaScript 检查它：

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

但它也会给<html>标签添加一个类，这样你也可以在CSS上自定义规则：

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

【讨论】：