24

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

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

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 );

                                    }
                            }

以前にこれを投稿しようとしましたが、解決策が得られなかったため削除しました。テストページへのリンクを投稿しても大丈夫だと思います。ところで、私はこれをMacSafariとMacFFでテストしました。私は他のページでこれと同じコードを実行しましたが、正常に動作します。このページのドームには、JSが失敗する原因があるはずだと思いますが、それがどうなるかはわかりません。

4

7 に答える 7

80

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

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

于 2012-10-08T18:58:38.527 に答える
3 
//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');
    }

});
于 2012-10-08T19:17:25.687 に答える
3

私も同じ問題を抱えていました。私はいくつかのものを見つけました：

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

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

于 2013-03-27T14:51:55.307 に答える
2

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

IE10はデフォルトで75％のズームを適用し、ウィンドウとドキュメントの測定値をねじ込むことを発見しました。

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

于 2014-04-27T07:50:47.667 に答える
0

周りを見回してこれに遭遇した人もいましたが、それが役立つかどうかはわかりませんが、取り上げる価値があります。

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

于 2012-10-08T18:58:16.140 に答える
0

jquery（および一般的にはdom）はquirksmodeでサイズを正しく計算していないため、次の2つの解決策があります。

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

それが役に立てば幸い。

于 2015-08-13T02:54:04.070 に答える
0

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

于 2017-10-27T22:57:47.890 に答える