lv_roller做无限滚动3
时间: 2024-05-04 16:16:45 浏览: 7
可以使用 JavaScript 实现一个无限滚动的列表,以下是一个简单的示例代码:
```html
<div id="list-container">
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<!-- ... -->
</ul>
</div>
```
```css
#list-container {
height: 300px; /* 容器高度 */
overflow: auto; /* 滚动条 */
}
```
```javascript
const list = document.querySelector('#list');
const items = list.querySelectorAll('li');
const scrollHeight = list.scrollHeight;
const itemHeight = items[0].offsetHeight;
let scrollTop = 0;
function handleScroll() {
scrollTop = list.scrollTop;
// 判断是否滚动到底部
if (scrollTop + scrollHeight >= (items.length + 1) * itemHeight) {
// 取出第一个元素,添加到列表末尾
const firstItem = items[0];
list.appendChild(firstItem.cloneNode(true));
list.removeChild(firstItem);
list.scrollTop = scrollTop - itemHeight;
}
}
// 监听滚动事件
list.addEventListener('scroll', handleScroll);
```
这段代码实现了一个简单的无限滚动效果,当滚动条滚动到底部时,它会将列表中的第一个元素移动到列表末尾,从而实现无限滚动的效果。