Question

我的情况非常复杂。我可能只是对自己的错误视而不见。我在这里有这个代码：

$(window).scroll(function() { //detect page scroll 
    if($(document).scrollTop() + $(window).height() == $(document).height()) {
        alert('Scrolled to Page Bottom');
        }

当用户滚动到页面底部时，它不会提醒我，当用户滚动到页面顶部时，它会提醒我..我在这里查看了一个非常相似的代码，但我仍然无法做到这项工作。

这是整个脚本。

<script type="text/javascript">
            $(document).ready(function() {
            var track_load = 0; //total loaded record group(s)
            var loading  = false; //to prevents multipal ajax loads
            var total_groups = <?php echo $total_groups; ?>; //total record group(s)

            $('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group

            $(window).scroll(function() { //detect page scroll

                if($(document).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
                {
                    alert('Scrolled to Page Bottom');
                    if(track_load < total_groups && loading==false) //there's more data to load
                    {
                        loading = true; //prevent further ajax loading
                        $('.animation_image').show(); //show loading image

                        //load data from the server using a HTTP POST request
                        $.post('autoload_process.php',{'group_no': track_load}, function(data){

                            $("#results").append(data); //append received data into the element

                            //hide loading image
                            $('.animation_image').hide(); //hide loading image once data is received

                            track_load++; //loaded group increment
                            loading = false; 

                        }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                            alert(thrownError); //alert with HTTP error
                            $('.animation_image').hide(); //hide loading image
                            loading = false;

                        });

                    }
                }
            });
        });
    </script>

Answer 1

您的代码正常运行，我无法找到问题。我在JSFiddle中对它进行了测试并且它正在工作，请看小提琴：http://jsfiddle.net/54ta3hug/

$(window).scroll(function() { //detect page scroll 
    if($(document).scrollTop() + $(window).height() == $(document).height()) {
        alert('Scrolled to Page Bottom');
        }
    });

通过在http://writinger.com/查看示例，通过一些调试我发现由于某种原因$（window）.height（）返回与页面中的$（document）.height（）相同的值。这就是当$（document）.scrollTop（）为0时滚动到顶部时显示的原因。

但当然很清楚，在您的示例中，文档更大，因为有一个滚动条。我相信它为$（window）.height（）返回了一个错误的值，因为你的HTML文档格式不正确。此外，它可能没有DOCTYPE声明。这意味着它不是有效的HTML。因此，如果您没有指定doctype，JQuery无法以正确的方式计算窗口高度/文档高度。

修复HTML并向其添加DOCTYPE声明。在它之后，它应该工作。

使用jQuery查明用户是否滚动到页面底部的错误

1 个答案: