原生JS实现页面滚动到底部时自动加载数据效果
// 监听滚动事件
window.addEventListener('scroll', function() {
// 当页面滚动到底部时
if (isScrollBottom()) {
// 执行加载数据的函数
loadMoreData();
}
});
// 检查是否已经滚动到页面底部
function isScrollBottom() {
return window.innerHeight + window.scrollY >= document.body.offsetHeight;
}
// 模拟加载数据的函数
function loadMoreData() {
console.log('加载更多数据...');
// 在这里添加你的Ajax请求或其他逻辑以加载数据
}这段代码为你提供了一个简单的解决方案，用于检测用户是否已经滚动到页面底部，并在到达底部时自动加载更多数据。这种模式常用于无限滚动的网页，如社交媒体 Feed、新闻网站等。在实际应用中，你需要替换 loadMoreData 函数中的逻辑以实现从服务器获取数据并更新页面内容。
评论已关闭