检测滚动到底部的动态页面

detect scroll to bottom on dynamic page

本文关键字：动态 底部 滚动 检测      更新时间：2023-09-26

我打算在div中加载滚动到底部的额外内容，但到目前为止还无法使jquery检测滚动到底部。我知道这里有很多同样的问题。但没有一个解决方案对我有效。我显然是做错了什么，但作为新手，我不知道是什么。下面是代码:

<html>
<head>
<script src="jquery-1.10.1.min.js">
</script>
<script>
$(document).ready(function(){
    var n1=0;
    var n2=5;
    var $win = $(window);   
    $("#page").change(function(){
        var str=$(this).val()
        console.log(str);
        if(str.length===0){$("#rssoutput").html("");}
        else
        {$("#rssOutput").load("http://dodomain.uni.me/getrss.php?q="+str+"&n1="+n1+"&n2="+n2);}
    });
    $(window).scroll(function() {
        if (document.documentElement.clientHeight + $(document).scrollTop() >= document.body.offsetHeight )
        { 
            alert("bottom of the page.");
        }

    });
});
</script>

</head>
<body>
<form>
<select id="page">
<option value="">Select an RSS-feed:</option>
<option value="Google">Google News</option>
<option value="cyanide">cyanide and happiness</option>
<option value="oglaf">Oglaf</option>
<option value="xkcd">xkcd</option>
<option value="wired">wired.com</option>
</select>
</form>
<br>
<div id="rssOutput" >RSS-feed will be listed here...</div>
</body>
</html>

我可能提供了比需要更多的代码。但我不确定问题是否出在其他地方。php只是发送生成一些html的rss提要。网址在这里http://dodomain.uni.me/rss.html

编辑:代码工作时，div的内容是静态的(即不通过ajax加载)如图所示http://jsfiddle.net/jkh5P/

这段代码确实为我工作-我只是拿出$(window).scroll(~~~~)，并将其插入Chrome控制台，这一切对我来说都很好。我也把你发布的所有内容，以HTML文件的形式打开。似乎可以按预期工作，但有一个警告:

如果文档是不可滚动的(适合在窗口内)，scroll是/将永远不会被调用。对于这种情况，我会说剥离你的$(window)。滚动(THIS STUFF)到一个新函数中，并在$(document)中调用它。准备活动。

问题是浏览器返回的窗口高度和文档高度相同的值，除非在html中提到了doctype。将<!DOCTYPE html>添加到html中解决了这个问题。这就是为什么它是在jsfiddle等工作，而不是在我的网站。

相关文章：