Question

所以我已经学习了2个月的JavaScript，我决定做一个滚动的事情，当您滚动页面时，您会获得更多的内容（div中的更多段落）。我在youtube上观看了教程，做了类似的事情，但它没有按我预期的那样工作。乍一看似乎可行，但我注意到我不需要向下滚动（或滚动到底部）来加载更多内容，但是也可以向上滚动。为了节省您一些时间（如果您对阅读整个脚本不感兴趣），这就是我要检查的内容（脚本末尾的代码）：

 $(window).scrollTop() + $(window).height() > $("#load_data").height()

根据我的理解，这在Vanilla JS中是哪个：

 window.innerHeight + window.scrollY > document.querySelector('#load_div').offsetHeight

scrollTop（）和scrollY应该返回（或设置）从滚动窗口顶部开始的像素值（在这种情况下）。然后我们添加窗口的内部高度。这就是我当时不明白的，那两个2难道不应该比divs高度更大吗？所以这解释了为什么我在任何地方滚动都会触发。但是如何设置它，使其仅在我处于底部或附近时才触发？这是完整的代码（没有php响应部分，该部分仅返回从数据库获取数据的段落）：

            <div id="load_data"></div>
            <div id="load_data_message"></div>

        </div>

        <script>
            $(document).ready(function(){
            var limit = 8;
            var start = 0;
            var action = 'inactive';
                function load_data(limit, start){

                    $.ajax({
                        url: 'infinitload.php',
                        method: 'POST',
                        data: {limit: limit, start: start},
                        cache: false,
                        success: function(data){
                            $('#load_data').append(data);  //Appending data;

                        if(data == ''){ 
                        $('#load_data_message').html('<button>No results found</button>');
                        action = 'active';//if
                        }else{
                           $('#load_data_message').html('<button>Loading Content</button>');
                           action = 'inactive';
                        }//else

                        }//success
                    })//ajax      
                }//load_data()

                //Loading for the first time
            if(action == 'inactive'){
                action = 'active';
                load_data(limit, start);
            }

            $(window).scroll(function(){
             if( $(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive'){
                 $('button:contains("Loading Content")').toggle();
                 action = 'active';
                 start = start + limit;
                 setTimeout(function(){
                     load_data(limit, start);
                 }, 1500);
             }
            });
        });//dom ready

        </script>


    </body>

更新：我尝试过这样的代码http://jsfiddle.net/nick_craver/gWD66/ 这完全有道理，并且在这里可以作为示例，但对于我来说不是。困惑。可能是导致我出现问题的其他原因，所以我将尝试再次查看我的代码。感谢您的所有答复。

Answer 1

尝试更换

$("#load_data").height()

使用

$("#load_data").offset().top

Answer 2

问题终于解决了。我忘记了html DOCTYPE的东西。再也不烦了：）

Javascript加载更多AJAX问题内容

2 个答案: