使用jQuery在滚动的容器中加载更多帖子可以通过以下步骤实现:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div>
元素,设置其高度和样式,例如:<div id="scrollContainer" style="height: 400px; overflow-y: scroll;">
<!-- 这里是帖子内容 -->
</div>
var postCount = 10; // 初始加载的帖子数量
function loadPosts() {
// 使用Ajax请求获取更多帖子内容
$.ajax({
url: 'loadmore.php',
method: 'GET',
data: { count: postCount },
success: function(response) {
// 将返回的帖子内容添加到滚动容器中
$('#scrollContainer').append(response);
postCount += 10; // 更新帖子数量
}
});
}
// 初始加载帖子
loadPosts();
$('#scrollContainer').scroll(function() {
var container = $(this);
var scrollHeight = container.prop('scrollHeight');
var scrollTop = container.scrollTop();
var containerHeight = container.height();
// 判断是否滚动到底部
if (scrollTop + containerHeight >= scrollHeight) {
loadPosts(); // 加载更多帖子
}
});
这样,当用户滚动到滚动容器的底部时,会自动触发加载更多帖子的函数,从服务器获取更多帖子内容并添加到滚动容器中。
推荐的腾讯云相关产品:腾讯云对象存储(COS)
请注意,以上答案仅供参考,具体的实现方式和推荐产品可能因实际需求和环境而异。
领取专属 10元无门槛券
手把手带您无忧上云