一个列表实现一个一个的列表项向上无限滚动 js 原生dom
时间: 2024-10-19 11:09:44 浏览: 26
要在JavaScript原生DOM中实现一个列表项(li元素)向上无限滚动的效果,你可以创建一个滚动事件监听器,当滚动到列表顶部时,动态加载更多的项目。以下是一个简单的示例:
```javascript
// 获取列表元素
const list = document.getElementById('scrollable-list');
// 获取滚动容器的滚动高度和视口高度
const container = list.parentNode;
const scrollHeight = container.scrollHeight;
const scrollTop = container.scrollTop;
// 设置滚动事件处理器
list.addEventListener('scroll', function() {
if (scrollTop + window.innerHeight >= scrollHeight) { // 当滚动到底部时
loadMoreItems(); // 调用加载更多项目的函数
}
});
// 加载更多项目的方法
function loadMoreItems() {
// 模拟数据加载(实际应用中可以替换为从服务器获取)
const moreItems = Array.from({ length: 5 }, (_, index) => `<li class="item">${index}</li>`); // 加载5个新项目
// 将新项目添加到列表末尾
moreItems.forEach(item => {
list.appendChild(document.createElement('div')).innerHTML = item; // 或者使用其他方式插入到列表中
});
// 更新滚动高度
scrollHeight += moreItems[0].offsetHeight; // 假设每个新项目高度一致
}
// 初始化加载前几项
loadMoreItems();
```
在这个例子中,当你滚动到列表底部时,`loadMoreItems`函数会被触发,它会加载额外的新项目并添加到列表的末尾。请注意,这只是一个基础示例,实际场景可能需要处理分页、异步请求等复杂情况。
阅读全文