jquery - Modernizer 特征检测

Question

我必须使用 modernizer 来检测浏览器是否支持“cssscrollbar”属性，true 或 false。基于这个值，我必须做一些事情，比如添加插件和 CSS。

我正在使用下面这样的东西，我不知道:

var frag = document.createDocumentFragment();
for ( prop in Modernizr ) {
  var para = document.createElement('p');
    para.textContent = prop + ': ' + Modernizr[ prop ];
  frag.appendChild( para );
}

document.body.appendChild( frag );

检查 fiddle我指的是什么。

Answer 1

Modernizr.addTest('cssscrollbar', function() {

        // Tested Element
    var test = document.createElement('div'),

        // Fake body
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }()),

        property = 'scrollbar{width:0px;}';

    // Force scrollbar
    test.id = '__sb';
    test.style.overflow = 'scroll';
    test.style.width = '40px';

    // Apply scrollbar style for all vendors
    test.innerHTML = '&shy;<style>#'+Modernizr._prefixes.join(property+' #__sb::').split('#').slice(1).join('#')+property+'</style>';

    root.appendChild(test);

    // If css scrollbar is supported, than the scrollWidth should not be impacted
    var ret = test.scrollWidth == 40;

    // Cleaning
    document.body.removeChild(test);
    if (fake) {
        document.documentElement.removeChild(root);
    }
    return ret;
});

如果你添加这个，那么你将拥有对 modernizer 的 cssscrollbar 支持......