web-dev-qa-db-ja.com

window.scrollYのIE8の代替手段？

window.scrollYを使用してスクロールしたピクセル数を判断しようとしています。しかし、これはIE8ではサポートされていません。安全なクロスブラウザの代替手段は何ですか？

javascripthtmlinternet-explorer-8cross-browser
43
Jake Wilson

window.scrollYのクロスブラウザー互換バージョンはdocument.documentElement.scrollTopです。 IE8以前の完全で詳細な回避策については、この Mozillaのドキュメント の「メモ」セクションを参照してください。

ここで述べたように 、pageYOffsetはwindow.scrollYの別の代替手段です（ただしこれはIE9 +のみであることに注意してください互換性）。

上記のリンクに関して、スクロール位置を取得する完全に互換性のある方法については、例4を確認してください（@adeneoが述べたように、ズームも考慮します！） document.documentElement.scrollTopおよびdocument.documentElement.scrollLeftを使用します。

ここで、あなた自身のために例を試してみてください！

101
lifetimes

あまり使用する必要がない場合は、次のようにします。

var scroll = window.scrollY //Modern Way (Chrome, Firefox) 
|| document.documentElement.scrollTop (Old IE, 6,7,8)
13
Tom Sarduy

JQueryを使用している場合、$（window）.scrollTop（）を使用してIE 8.のY位置を取得しました。

4
Daniel

ライブラリを使用してこの種の基本機能を処理するだけの正当な理由がある場合は、「車輪を再発明しない」ことをためらわないでください。

Mootoolsはオープンソースです で、その実装、関連するスニペットを「盗む」ことができます：

getScroll: function(){
    var win = this.getWindow(), doc = getCompatElement(this);
    return {x: win.pageXOffset || doc.scrollLeft, y: win.pageYOffset || doc.scrollTop};
}

function getCompatElement(element){
    var doc = element.getDocument();
    return (!doc.compatMode || doc.compatMode == 'CSS1Compat') ? doc.html : doc.body;
}

これら2つは、現在のブラウザにどの互換モードがあるかを決定し、window.pageYOffsetまたはdocument.body.scrollTopそれに基づいて、またはdocument.html.scrollTop本当に古いバグのあるブラウザ向け。

3
Niels Keurentjes

Mozillaと上記の回答に基づいて、座標をより簡単に取得するために以下の関数を作成しました。

var windowEl = (function () {
    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
    function scroll() {
        return { left: scrollLeft, top: scrollTop };
    };
    function scrollLeft() {
        return window.scrollX || window.pageXOffset || (isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft);
    };
    function scrollTop() {
        return window.scrollY || window.pageYOffset || (isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop);
    };
    return {
        scroll: scroll,
        scrollLeft: scrollLeft,
        scrollTop: scrollTop
    }
})();

Mozillaドキュメント によれば、上記のライフタイムで引用されているように、pageXOffsetプロパティはscrollXプロパティのエイリアスであるため、厳密に言うと必要ではありません。

Anyhoo、使用方法は次のとおりです。

var scroll = windowEl.scroll();
// use scroll.left for the left scroll offset
// use scroll.top for the top scroll offset

var scrollLeft = windowEl.scrollLeft();
// the left scroll offset

var scrollTop = windowEl.scrollTop();
// the top scroll offset

Chrome、Firefox、Opera、Edge（8-Edge）、IE（7-11）、XP上のIE8でテストおよび動作

1
Dev Ops

Nielsの答えに基づいて、Y座標だけが必要な場合、少しコンパクトなソリューションを思い付きます。

function get_scroll_y() {
    return window.pageYOffset || document.body.scrollTop || document.html.scrollTop;
}
1
Greg Prisament

window.scrollYとwindow.scrollXは、（Chrome、FireFox、Safari）などのすべての最新ブラウザで正常に動作しますが、IEでは使用できないため、window.pageXOffsetまたはwindow.pageYOffsetの使用を修正します。

IEを含むすべてのブラウザでプログラムによるスクロールが機能するように、問題を修正するために作成したサンプルコードを次に示します。

if((window.scrollY || window.pageYOffset) >= 1100){
   //alert('Switch to land');
    $('#landTrst').trigger('click'); // your action goes here
}else if ((window.scrollY || window.pageYOffset) <= 900) {   
    //alert('Switch to Refernce Letter');
     $('#resLet').trigger('click'); // your action goes here
}
0
dxpkumar

角度では、次を使用します。

  var windowEl = angular.element($window);
  scrolldist = windowEl.scrollTop();
0
Soferio