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;
});

如果您添加此项，那么您将获得现代化程序的cssscrollbar支持..................

Answer 2

有testProp()功能：

Modernizr.testProp('css-scrollbar');

或者你可以customize your Modernizr（打开“非核心检测”）：

Modernizr功能检测

2 个答案: