4

特定のcssプロパティ属性がブラウザでサポートされているかどうかをテストしたいと思います。cssプロパティの場合、次のように実行できます

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


しかし、特定のクラスまたは属性をチェックする必要がある場合はどうなりますか。たとえば、のサポートをテストしたい

overflow-y:auto

サポートされている場合は大きなdivをスクロールするために使用し、他の場所ではiScrollを使用します。

どうやってやるの？plsは役立ちます。

4

3 に答える 3

8

古い質問のようなものですが、特にInkbugによって提供されたコードサンプルが期待どおりに機能しないため、ここで私の発見を共有したいと思いました。

オーバーフロープロパティのサポート

overflow-yCSS2.1の時代から存在しています（ただし、かなり最近、css3仕様で標準化されています）。そのため、デスクトップブラウザでのサポートは非​​常に適切です。

ここで質問しているのはoverflow-y: scroll、特定の要素を指定したときにスクロール動作が実際に機能するかどうかです。

この動作は、ごく最近、モバイルブラウザで導入されました。より正確には、AppleはiOS 5にベンダープレフィックスを付けて導入しました（ Appleのドキュメントの-webkit176ページを参照）。

Androidの具体的な情報は見つかりません。

（ベンダーに接頭辞が付いているかどうかにかかわらず）のサポートについて私が言えること：overflow-scrolling

  • 最新のnexus7（Android 4.1.1）：はい
  • Android 2.3.x：いいえ
  • iOS> = 5：はい
  • iOS <5：いいえ

スクロールオーバーフローの機能検出

要素にスクロール動作を与えたい場合は、機能検出を使用することをお勧めします。

これは、このプロパティ を検出する方法を示す要点です（それ以降、Modernizrに統合されています）。Modernizrを使用したくない場合は、ほとんど同じことを行う単純なバージョンを次に示します。scrolling-overflow

/**
 * 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
    }
};
于 2012-09-25T21:51:42.220 に答える
0

Arnaud Brosseauの返信は、確かにチェックマークに値します。

とにかく、Modernizrの使用も検討してください。

addTestおよびAPI 関数を使用するとtestAllProps、css プロパティのサポートを簡単に確認できます。

Modernizr.addTest('overflow-y',function(){
    return Modernizr.testAllProps('overflowY'); /* camel case here */
});

次に、JavaScript で確認できます。

if(Modernizr.overflowY){
    /* do something if supported */
}

ただし、タグにクラスも追加される<html>ため、CSS でルールをカスタマイズすることもできます。

.overflowY #element {
    /* style for browsers supporting overflow-y */
}
.no-overflowY #element {
    /* style for browsers NOT supporting overflow-y */
}
于 2012-09-25T22:00:55.910 に答える
0

DOM スタイルに無効な値を割り当てると、拒否されます。したがって、これはうまくいくはずです：

var testOverflowEl = document.createElement( "x-test" );
testOverflowEl.style.overflowY = "auto";
var overflowSupport = testOverflowEl.style.overflowY === "auto";
于 2012-07-12T14:58:51.690 に答える