js 向上无限滚动 鼠标移入会停止动画
时间: 2024-10-07 12:03:11 浏览: 13
在JavaScript中,实现一个向上无限滚动的效果,并且当鼠标移入时暂停动画,通常涉及到DOM事件监听和滚动处理。下面是一个简化的示例:
```javascript
// 获取滚动区域元素
const scrollArea = document.getElementById('scrollContainer');
// 初始化滚动位置和滚动高度
let scrollTop = scrollArea.scrollTop;
let scrollHeight = scrollArea.scrollHeight;
// 滚动函数
function infiniteScroll() {
if (scrollTop + window.innerHeight >= scrollHeight) {
// 当滚动到底部时,加载更多内容
loadMoreData(); // 这里假设有一个loadMoreData的函数来获取新的内容
scrollTop = 0; // 保持滚动位置在顶部
} else {
scrollTop += 5; // 触发下一次滚动,这里每5px滚动一次
}
scrollArea.scrollTop = scrollTop;
}
// 鼠标移入事件监听
scrollArea.addEventListener('mouseenter', function() {
clearInterval(infiniteScrollInterval); // 清除定时器,暂停滚动
});
// 鼠标移出事件监听
scrollArea.addEventListener('mouseleave', function() {
infiniteScrollInterval = setInterval(infiniteScroll, 16); // 重新设置定时器恢复滚动,这里是每16毫秒执行一次
});
// 初始化滚动动画
infiniteScrollInterval = setInterval(infiniteScroll, 16);
```
在这个例子中,我们创建了一个无限滚动效果,通过`setInterval`每隔一定时间更新滚动位置。当鼠标进入滚动区域时,我们清除定时器来暂停滚动;鼠标离开时再重新启动定时器。
阅读全文