web-dev-qa-db-ja.com

Jquery $（window）.height（）関数は実際のウィンドウの高さを返しません

ユーザーが一番下までスクロールしたときにajaxコンテンツを動的にロードする必要があるページがあります。問題は、JQueryが正しいウィンドウの高さを返さないことです。以前にこの関数を使用したことがあり、失敗することは一度もありませんが、何らかの理由でドキュメントの高さと同じ値を返します。ここにテストページがあります：bangstyle.com/test-images

ページの読み込み時に表示するアラートをコーディングしました。また、ユーザーが上部より500ピクセル下にスクロールするたびにアラートをコーディングしました。

function scroller() {

                        if($(window).scrollTop() > 500){

                        delay(function(){ //200ms wait
                                pagecounter++;
                                sideshow();
                                alert("window height: " + $(window).height() + " scrolltop: " + $(window).scrollTop() + " document height: " + $(document).height());

                                return false;
                            }, 200 );

                                    }
                            }

以前にこれを投稿しようとしましたが、解決策が得られなかったため削除しました。テストページへのリンクを投稿してもかまいません。ところで、私はこれをMac SafariとMac FFでテストしました。私はこれと同じコードを他のページで実行しましたが、うまくいきます。このページのdomにJSが失敗する原因があるに違いないと思いますが、それがどうなるかはわかりません。

javascriptjquerywindowheight
24
Joel Joel Binks

HTMLソースコードを見てください。最初の行は<!DOCTYPE html>で、代わりに<style>タグが必要です。

そのため、ドキュメントはQuirksモードで実行されており、jQueryは正しいウィンドウサイズを計算できないようです。

76
Inferpse
//works in chrome
$(window).bind('scroll', function(ev){

    //get the viewport height. i.e. this is the viewable browser window height
    var clientHeight = document.body.clientHeight,
        //height of the window/document. $(window).height() and $(document).height() also return this value.
        windowHeight = $(this).outerHeight(),
        //current top position of the window scroll. Seems this *only* works when bound inside of a scoll event.
        scrollY = $(this).scrollTop();

    if( windowHeight - clientHeight === scrollY ){
        console.log('bottom');
    }

});
3
Geuis

同じ問題がありました。私はいくつかのものを見つけました：

1）ドキュメントのレンダリングが完了する前に実際の高さを取得しようとすると、問題が発生します。 2）googleで問題が発生するchrome上記のcorret DOCTYPEを使用しない場合3）googleで常に発生するchrome文書が完全にレンダリングされます。

グーグルクロムについては、ここで回避策を見つけました： get-document-height-cross-browser 私はグーグルにのみこのソリューションを使用していますchromeそしてそれは解決しました私の問題は、まだ問題を抱えている人の助けになると思います。

3
Pontual

これは古い質問ですが、最近、IE10で正しいウィンドウの高さを数ピクセル分取得できないことに苦労しました。

IE10はデフォルトで75％ズームを適用し、ウィンドウをねじ込み、測定値を記録することを発見しました。

したがって、幅または高さが間違っている場合は、ズームが100％に設定されていることを確認してください。

2
ozzysong

スクリプトをフッターに移動しましたが、解決しました。

0
harrykirsten

周りを見回してつまずいた人もいましたが、助けになるかどうかはわかりませんが、育てる価値はあります。

なぜ$（window）.height（）が間違っているのですか？

0
westlywright

Jquery（およびdom全般）はquirksmodeでサイズを正しく計算しないため、2つの解決策：

  1. ページの上部にdoctype htmlを追加します（「正解」で述べたように）。または
  2. 最初のオプションがオプションでない場合、window.innerHeight、window.innerWidthを使用します。

それが役に立てば幸い。

0
Lex