9

スクロールページのデザインに取り組んでおり、ダイアログボックスを表示および非表示にするための次のJavascriptがあります。

        if(window.pageYOffset >= 300){

            $('#m1').fadeIn('slow');

    }

    if(document.documentElement.scrollTop >=300){

        $('#m1').fadeIn('slow');

    }

これはChrome、FF、IE9+でうまく機能します

ただし、IE8,7では、それは一種の機能しかありません。要素を適切に表示および非表示にしますが、スクロール位置を評価してから要素を非表示にするまでの遅延はひどいものです。また、フェードはありません、それはただ起こります。

対処する必要があるのはIE8の問題なのか、それともIE8でリアクティブでクリーンなフェードを実現する方法があるのか​​疑問に思っています。

4

2 に答える 2

26

pageYOffsetpageXOffsetIE8以前ではサポートされていないため、次の機能を試してください。

// Return the current scrollbar offsets as the x and y properties of an object
function getScrollOffsets() {

    // This works for all browsers except IE versions 8 and before
    if ( window.pageXOffset != null ) 
       return {
           x: window.pageXOffset, 
           y: window.pageYOffset
       };

    // For browsers in Standards mode
    var doc = window.document;
    if ( document.compatMode === "CSS1Compat" ) {
        return {
            x: doc.documentElement.scrollLeft, 
            y: doc.documentElement.scrollTop
        };
    }

    // For browsers in Quirks mode
    return { 
        x: doc.body.scrollLeft, 
        y: doc.body.scrollTop 
    }; 
}
于 2012-04-23T18:32:52.943 に答える
2

これを使用して修正することもできます。

document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset;

だからあなたはそれを持っています

if((document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset) >= 300){
        $('#m1').fadeIn('slow');
}

このようにして、コードの複製を回避できます。

于 2013-12-13T14:22:57.027 に答える