モバイルブラウザがオーバーフローをサポートしているかどうかを検出：スクロール

Question

これには、デバイスとライブラリに依存しない単純なJavaScriptソリューションがありますか？

可能であれば、スクロール可能なコンテナをモバイルに配信できるように、html要素にクラスを追加したいと思います。

これは、Modernizrと同様のアプローチで、ブラウザの検出ではなく機能のサポートを検出します。私はModernizrフレームワーク全体を使いたくないだけです。モバイルプロジェクトのJavaScriptライトを維持しようとしています。

ありがとうございます！

Answer 1

これは完璧ではありませんが、私はこれを使って-webkit-overflow-scrollを検出しています。

var overflowScrolling = typeof($("body")[0].style["-webkit-overflow-scrolling"]) !== "undefined"; 

overflow-scrollingでない場合は、iScrollを読み込みます。

-webkit-overflow-scrollingをサポートしているデバイスはまだiScrollを読み込みますが、これは少なくともiOS 5と最新のアンドロイドにネイティブスクロールすることを意味します。ここで

Answer 2

は非ベンダー接頭辞プロパティを含むすべての可能なオプションをチェックし、jQueryのか、Modernizrなどのライブラリの依存関係を持っていないソリューションです：

function hasOverflowScrolling() { 
    var prefixes = ['webkit', 'moz', 'o', 'ms']; 
    var div = document.createElement('div'); 
    var body = document.getElementsByTagName('body')[0]; 
    var hasIt = false; 

    body.appendChild(div); 

    for (var i = 0; i < prefixes.length; i++) { 
     var prefix = prefixes[i]; 
     div.style[prefix + 'OverflowScrolling'] = 'touch'; 
    } 

    // And the non-prefixed property 
    div.style.overflowScrolling = 'touch'; 

    // Now check the properties 
    var computedStyle = window.getComputedStyle(div); 

    // First non-prefixed 
    hasIt = !!computedStyle.overflowScrolling; 

    // Now prefixed... 
    for (var i = 0; i < prefixes.length; i++) { 
     var prefix = prefixes[i]; 
     if (!!computedStyle[prefix + 'OverflowScrolling']) { 
      hasIt = true; 
      break; 
     } 
    } 

    // Cleanup old div elements 
    div.parentNode.removeChild(div); 

    return hasIt; 
} 

alert(hasOverflowScrolling()); 

Answer 3

これは非常に良い質問です。残念ながら現在、overflow: scrollのサポートを確実に確認する方法はありません。

フィラメント群は、（http://filamentgroup.github.io/Overthrow/を参照してください）あなたのプロジェクトで使用したい場合があり、このためのポリフィルを持っていますが、自分自身によると：

トラブルが、それは難しいです - オーバーフローをテストするために - おそらく不可能 サポート[...]必要に迫られて

、転覆は、ネイティブのオーバーフローをサポートしていることが知られているモバイル プラットフォームの現在および将来のバージョンをホワイトリストにユーザーエージェント 文字列を調べて、ではなく 以上を通じてチェックする前に信頼性が高く、不可知論手段：すなわち、 iOS5をの（！今クロームAndroidのあまり）に触れ