4

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

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


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

overflow-y:auto

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

我怎样才能做到这一点？请帮忙。

4

3 回答 3

8

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

溢出属性支持

overflow-y自从 CSS2.1 时代就已经存在（但是它最近在 css3 规范中被标准化了）。因此，桌面浏览器的支持非常不错。

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

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

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

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

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

滚动溢出的特征检测

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

这是一个要点，展示了如何检测此scrolling-overflow属性（自 以来它已 集成到 Modernizr 中）。如果您不想使用 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
    }
};
于 2012-09-25T21:51:42.220 回答
0

Arnaud Brosseau的回复当然值得打勾。

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

使用它们addTest和testAllPropsAPI 函数，您可以轻松检查任何 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 */
}
于 2012-09-25T22:00:55.910 回答
0

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

var testOverflowEl = document.createElement( "x-test" );
testOverflowEl.style.overflowY = "auto";
var overflowSupport = testOverflowEl.style.overflowY === "auto";
于 2012-07-12T14:58:51.690 回答