현대화 기능 감지 기능

Question

브라우저가 "cssscrollbar"속성 (true 또는 false)을 지원하는지 여부를 감지하려면 modernizer를 사용해야합니다. 그 가치에 따라 나는 플러그인과 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 :

내가 인식하지 오전 아래이 같은 무언가를 사용하고 있습니다. u는이를 추가하는 경우 다음 U는 모더 나이저에 대한 cssscrollbar 지원을해야합니다

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

..................

Answer 2

가 testProp() 기능이있다 :

Modernizr.testProp('css-scrollbar'); 

또는 customize your Modernizr ("비 핵심 감지 항목"열 수 있음) :