Question

我试图创建一个脚本，当用户滚动到页面底部时从Web服务加载内容这是我的JS代码：

var serviceURL = "http://projects.dev/work/";
var current_page = 1;
var total_pages = 1;
$(function() {
    Init();
});

function Init() {
	getPosts();
	$(window).scroll(function(){
		if((($(window).scrollTop()+$(window).height())+20)>=$(document).height()){
			if(current_page <= total_pages){ 
				getPosts();
			}
		}
	}); 
}
function getPosts(){
	$.ajax({
		url:serviceURL+"api/posts?page="+current_page,
		dataType: "json",
		async : false,
		cache : false,
	}).then( function(data){
		total_pages = data.last_page;
			$.each(data.data, function(index, post) {
				$('#newsList').append("<li>"+
				  "<aside><img src='"+serviceURL+"cdn/"+post.picture+"'></aside>"+
				  "<div>"+
				  "<a href='post.html?id="+post.id+"'><h3>"+post.title+"</h3></a>"+
				  "<h4>"+post.created_at.split(" ")[0]+"</h4>"+
				  "</div>"+
			"</li>");
			});
			$("#loading").hide("slow");
		current_page++;
	});
}

<!DOCTYPE html>
<html dir="rtl">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
        <link rel="stylesheet" href="css/main.css">
    </head>
  <body>
  <div id="loading"><div id="loading-spin"></div></div>
  <header><div id="brand">News</div>
    <a href="index.html" class="medIcons left" id="back"></a>
  </header>
  <article style="width:100%;margin:0 !important;padding-right:0 !important;padding-left:0 !important;">
  <ul id="newsList"></ul>
  
  </article>
  




  
        
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/posts.js"></script>
    </body>
</html>

你能告诉我什么是错的吗？我可以从第一次只获得帖子，然后当我滚动到页面底部时没有任何反应。 PS：我有很多帖子，而last_page变量是我在我的数据库上的页面总数。

Answer 1

我修复它，我不得不删除溢出：隐藏在容器中。谢谢。

在滚动事件上加载内容不起作用

1 个答案: