检测动态页面上滚动到底部 [英] detect scroll to bottom on dynamic page
问题描述
我打算在div的底部滚动中加载额外的内容，但是到目前为止，无法使jquery检测到底部的滚动.我知道这里有很多问题要问同样的问题..但是没有一个解决方案对我有用.我显然做错了什么，但是新手无法弄清楚是什么.这是代码:
I intend to load extra content on scroll to bottom in a div, but have been so far unable to make the jquery detect scroll to bottom. I know there are many questions here asking the same.. but none of the solutions have worked for me. I clearly have been doing something wrong, but being new at this can't figure out what. here is the code:
<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刚发送的RSS提要生成了一些html.它在线上 http://dodomain.uni.me/rss.html
I probably provided more code than needed.. but I'm unsure if the problem is elsewhere. The php just sends generates some html off rss feeds . Its online here http://dodomain.uni.me/rss.html
如以下示例所示，当div的内容是静态的(即未通过ajax加载)时，该代码有效: http: //jsfiddle.net/jkh5P/
the code works when the contents of the div is static (ie not loaded via ajax) as demonstrated here http://jsfiddle.net/jkh5P/
推荐答案
问题是，除非html中未提及doctype，否则浏览器将返回相同的窗口高度和文档高度值.将<!DOCTYPE html>添加到html中可以解决此问题.这就是为什么它在jsfiddle等环境下而不在我的网站上起作用的原因.
The problem was that browsers return same values for window height and document height unless a doctype is mentioned in the html . Adding <!DOCTYPE html> to the html solved the problem. This is why it was working in jsfiddle etc and not on my site.
这篇关于检测动态页面上滚动到底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
