1

スクロールに応じて、ウィンドウ ビューポートの左上隅と右下隅の座標を見つけるスクリプトを作成しようとしています。

これを達成するには、ページの高さ/幅の合計と、垂直/水平スクロールの量が必要です。

window私の問題は、、、、などdocumentに適用できるさまざまなプロパティが非常に多いことbodyです。さまざまなブラウザーについて話しているわけではありません。

したがって、基本的に私の質問は次のとおりです。

  • jQuery を使用せずに、クロス ブラウザーと互換性のある方法で、ページの高さ/幅、ビューポート サイズ、および垂直/水平スクロールの量を取得できますか?

よろしくお願いします！

私はここに投稿された回答を使い始めました: JavaScript get window X/Y position for scrolling .

4

2 に答える 2

2

これは、エンド ユーザーの画面のサイズを特定する jQuery 以外の方法を使用する必要があったときに、過去に使用したものです。完璧にはほど遠いですが、私はそれが最高点に達し、ほとんどのブラウザで動作することを発見しました. また、正確なサイズも得られませんが、画面にすべてを表示することだけが心配な場合は、これでうまくいきます。

// Function to get the height of the end user's window
function getWindowHeight() {
    var winHeight = 0;
    // Check for common mobile browser
    if ((screen.width < 300)||(screen.height < 300)) {
        if (( window.outerHeight != undefined )||( window.outerHeight > 100 )){
            winHeight = window.outerHeight;
        }
        else{
            winHeight = screen.Height;
        }
    }
    // If not, check to see what Browser is being used.
    else {
        if( typeof (window.innerWidth ) == 'number') {
            //Non-IE
            winHeight = window.innerHeight;
        } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight )) {
            //IE 6+ in 'standards compliant mode'
            winHeight = document.documentElement.clientHeight;
        } else if(document.body && (document.body.clientWidth || document.body.clientHeight )) {
            //IE 4 compatible
                winHeight = document.body.clientHeight;
        } else if(screen.height == 'number'){
            //IE Mobile 6.0
            winHeight = screen.height;
        }
    }
    return winHeight;
}


// Function to get the width of the end user's window
function getWindowWidth() {
    var winWidth = 0;
    // Check for common mobile browser
    if (input == "yes"){
        if (( window.outerWidth != undefined )||( window.outerWidth > 100 )){
            winWidth = window.outerWidth;
        }
        else{
            winWidth = screen.width;
        }
    }
    // If not, check to see what Browser is being used. 
    else {          
        if( typeof (window.innerWidth ) == 'number') {
            //Non-IE
            winWidth = window.innerWidth;
        } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight )) {
            //IE 6+ in 'standards compliant mode'
            winWidth = document.documentElement.clientWidth;
        } else if(document.body && (document.body.clientWidth || document.body.clientHeight )) {
            //IE 4 compatible
            winWidth = document.body.clientWidth;
        } else if(screen.width == 'number'){
            //IE Mobile 6.0
            winWidth = screen.width;
        }
    }
    return winWidth;
}

そこにあるすべてのオプションを網羅したい場合は、さらに多くを追加する必要がありますが、うまくいけば、これでどこかにたどり着くことができます.

于 2012-11-05T19:43:32.233 に答える
0

ページの高さ/幅の合計を取得する

使用するだけdocument.documentElement.scrollWidthでscrollHeight

ビューポートのサイズ

スクロールバーの有無にかかわらず、2 つのサイズがあります。スクロールバーでビューポート サイズを取得するには、次を使用します。

var viewportWidthWithScrollbars = window.innerWidth || document.documentElement.offsetWidth;(高さをinnerHeightとに変更)offsetHeight

innerWidthW3C ブラウザーおよびoffsetWidth標準モードの IE 用です。

スクロールバーなしでビューポートのサイズを取得するには (おそらくこれが必要です)、次を使用します。

var viewportWidthWithoutScrollbars = document.documentElement.clientWidth;

縦横スクロール量

これはトリッキーな部分です。documentElement.scrollLeftChrome の使用と Chrome (および互換モードの IE) を除くすべてのブラウザーは を使用するdocument.body.scrollLeftため、両方の値を確認する必要があります。

var pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

これらのメソッドは、W3C 互換のブラウザー (Opera、FF、Chrome) と Doctype を使用した IE 8 (つまり、標準準拠モードのみ) でテストしました。quirks モードでコードをテストしませんでしたが、とにかく quirks モードを使用するのは非常に悪い考えです。それでも使いたい場合は、のbody代わりにプロパティを確認する必要があると思いますdocumentElement。

このページを参考にしました: http://www.quirksmode.org/dom/w3c_cssom.html

このページを使用して、他のブラウザでテストできます: http://jsbin.com/obewib/1

于 2013-02-09T15:23:41.743 に答える