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

Question

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

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

但是,如果我必须检查特定的类或属性,该怎么办？例如,我想测试支持

overflow-y:auto

并使用它来滚动支持的大div,并在其他地方使用iScroll.

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

Answer 1

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

溢出属性支持

overflow-y自CSS2.1以来一直存在(但它最近已经标准化,在css3规范中).出于这个原因,桌面浏览器的支持是非常体面的.

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

最近在移动浏览器中引入了此行为.更准确地说,Apple在iOS 5中引入了带有-webkit供应商前缀的内容(参见Apple文档的第176页).

我找不到Android的具体信息.

我可以说支持overflow-scrolling(供应商前缀或非供应商):

• 最新的nexus7(Android 4.1.1):是的
• Android 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
    }
};