Javascript 返回相同值的window.height和document.height_Javascript_Jquery_Html

Javascript 返回相同值的window.height和document.height

javascript jquery html

Javascript 返回相同值的window.height和document.height,javascript,jquery,html,Javascript,Jquery,Html,在下面的代码中，我尝试实现无限滚动。我遇到的问题是“document.height”和“window.height”返回的值相同。有人能帮我找出哪里出了问题吗 <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript">

在下面的代码中，我尝试实现无限滚动。我遇到的问题是“document.height”和“window.height”返回的值相同。有人能帮我找出哪里出了问题吗

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript">
        $(window).scroll(function(){
            if($(window).scrollTop() == $(document).height() - $(window).height()){
                $('div#loadmoreajaxloader').show();
                $.ajax({
                    url: "loadmore.php",
                    success: function(html){
                        if(html){
                            $("#postswrapper").append(html);
                            $('div#loadmoreajaxloader').hide();
                            console.log($(document).height());
                            console.log($(window).height());
                        }else{
                            $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                        }
                    }
                });
            }
        });
    </script>

        <style>
        body{ margin:0px; }

        #wrapper{
            width:600px;
            margin:auto;
        }
        .spacer{
            clear:both;
            height:5px;
        }
        .txtarea{
            font-size:18px;
            height:50px;
            width:100%;
        }
        #postswrapper{
            border-bottom:1px dotted #555555;
        }
        .item{
            border-top:1px dotted #555555;
            padding:10px 5px;
            font-size: 16px;
        }
        .item:hover{
            background:#EFEFEF;
        }
        #newpostlink{
            display:block;text-align:center;border:2px solid #414141;background:#7D7D7D;color:#fff; margin: 0 0 10px;padding:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;font-size:20px;text-decoration:none;
        }
    </style>


    </head>

    <body>
                <div id="wrapper">
        <div id="postswrapper">

        <p style="font-size:28px">Infinite Scroll Demo 2</p>

<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
        </div>

        <div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" /></center></div>

    </div>

<div id="footer" style="display:inline-block;width:100%;padding:10px;background-color:#FFFFFF">


</div>

    </body>



</html>

试试看也许

if ($(window).scrollTop() <= $(document).height() - $(window).height()) {

loadmore.php通过它，您可以获得数据，如果没有，那么文档仍然适合在窗口中，没有滚动，那么它是相同的。这个文件名是loadmore.php，所以基本上它访问的是同一个文件。那么，如何计算差异来触发函数呢？使用不同的文件加载数据，仍然没有任何区别。