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

loading content on scroll event don't work

本文关键字：不起作用 加载 滚动 事件      更新时间：2023-09-26

>im 当用户滚动到页面底部时，尝试制作从 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变量是我在DB上的总页数。

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

相关文章：