Javascript 滚动到页面末尾时追加更多内容

嗨，我一个月前才开始使用JQuery Mobile，我的开始项目是构建一个应用程序来加载我的博客文章。经过日日夜夜的研究和SO的支持，我成功地加载了我的博客文章，并添加了加载更多链接以添加新内容

我的目的不是使用链接，而是在滚动到页面末尾时添加新内容。我现在不打算使用插件，但希望我能写一个简单的代码为我做到这一点。这是我当前的代码（第一个函数用于加载初始contenst，第二个函数用于附加更多内容。不确定这是否是最佳方法，但正如我所说，我仍在学习过程中）

$（document）.on（'pagebeforeshow'，'#blogposts'，函数（）{
$.ajax({
url:“http://howtodeployit.com/?json=recentstories",
数据类型：“json”，
beforeSend:函数（）{
$（“#加载程序”）.show（）；
},
完成：函数（）{
$（“#加载程序”）.hide（）；
},
成功：功能（数据）{
$（'#postlist'）.empty（）；
$.each（data.posts、function（key、val）{
//将收集的数据输出到页面内容中
var rtitle=$（“
”{
“类”：“vtitle”，
html:val.title
}),
var rappend=$（“
”）.append（rtitle）；
$（'#postlist'）.append（rappend）；
返回（键！==5）；
});
$（“#postlist”）.listview（）.listview（'refresh'）；
},
错误：函数（数据）{
警报（“服务当前不可用，请稍后再试…”）；
}
});
});
$（文档）。在（“单击”、“.load more”上，函数（）{
$.getJSON（“http://howtodeployit.com/?json=recentstories，函数（数据）{
var currentPost=$（“#postlist”）；
console.log（currentPost）；
loadMore=currentPost.parent（）.find（'.loadMore'）；
var currentPostcount=$（'#postlist li'）。长度；
控制台日志（currentPostcount）；
var desiredPosts=3；
newposts=data.posts.slice（currentPostcount，currentPostcount+desiredPosts）；
$.each（newposts，function（key，val）{
var rtitle=$（“
”{
“类”：“vtitle”，
html:val.title
}),
var rappend=$（“
”）.append（rtitle）；
$（'#postlist'）.append（rappend）；
$（“#postlist”）.listview（“刷新”）；
});
});
});

---

抱歉，如果在其他地方回答了此类问题。请发布链接

试试这个例子，它很管用

function loaddata()
{
    var el = $("outer");
    if( (el.scrollTop + el.clientHeight) >= el.scrollHeight )
    {
        el.setStyles( { "background-color": "green"} );
    }
    else
    {
        el.setStyles( { "background-color": "red"} );
    }
}

window.addEvent( "domready", function()
{
    $("outer").addEvent( "scroll", loaddata );
} );

提琴是

---

这是jquery的典型方法

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
         /*end reached*/
        $('.content').html($('.content').html()+"more</br></br></br></br>");
    }
});

$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
/*到达终点*/
$（'.content'）.html（$（'.content'）.html（）+“更多”


>”；
}
});

以jqm为例，

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
         /*end reached*/
        $('.content').html($('.content').html()+"more</br></br></br></br>");
    }
});