数据无限滚动使用intersection observer实现

li拜天儿

已于 2023-12-11 13:33:54 修改

阅读量601

点赞数 10

文章标签： javascript 开发语言 ecmascript

于 2023-12-11 11:51:51 首次发布

本文链接：https://blog.csdn.net/weixin_70238655/article/details/134923269

版权

本文介绍了IntersectionObserverAPI，如何用于监测元素与视口的交互，实现懒加载和无限滚动效果。通过示例展示了如何在HTML、CSS和JavaScript中使用这个API来优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.了解intersection observer

Intersection Observer 是一个浏览器 API，用于监测元素与其祖先或视口之间的交叉状态。它提供了一种异步的方法，以便在元素进入或离开视口时执行相应的操作。这对于实现懒加载、无限滚动、可见性追踪等交互效果非常有用。

2. Intersection Observer 的基本步骤：

创建一个 Intersection Observer 对象，并传入一个回调函数。
指定要观察的目标元素，可以是一个单独的元素，也可以是一个元素列表。
在回调函数中定义需要执行的操作，例如元素进入或离开视口时的动作。

简单实例：

// 创建 Intersection Observer 观察者对象
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 目标元素进入视口
      console.log('Element is visible');
    } else {
      // 目标元素离开视口
      console.log('Element is not visible');
    }
  });
});

// 指定要观察的目标元素
const targetElement = document.querySelector('.target');
observer.observe(targetElement);

3.进入主体实现无限滚动

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <script src="index.js" defer></script>
</head>
<body>
    <div class="card-container">
        <div class="card">这是第一行</div>
        <div class="card">这是第二行</div>
        <div class="card">这是第三行</div>
        <div class="card">这是第四行</div>
        <div class="card">这是第五行</div>
        <div class="card">这是第六行</div>
        <div class="card">这是第七行</div>
        <div class="card">这是第八行</div>
        <div class="card">这是第九行</div>
        <div class="card">这是第10行</div>
        <div class="card">这是第11行</div>
        <div class="card">这是第12行</div>
        <div class="card">这是第13行</div>
    </div>
</body>
</html>

css代码：

.card-container{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    grid-gap:10px;
    padding: 10px;
}
.card{
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

.show{
    animation: slideFromRight 0.5s ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.1s;
}

@keyframes slideFromRight{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(0);
    }
}

js代码：

const cards = document.querySelectorAll('.card');
const cardparent = document.querySelector('.card-container')

const observe = new IntersectionObserver((entries)=>{
    entries.forEach(entry => {
        if(entry.isIntersecting){
            entry.target.classList.toggle("show",entry.isIntersecting)
        }
        
    })
})

cards.forEach((card)=>{
    observe.observe(card)
})


const cardContainer = document.querySelector('.card-container')


function loadNewCards(){
    for(let i=0; i<10; i++){
        const card = document.createElement("div")
        card.textContent = "new card";
        card.classList.add("card")
        observe.observe(card)
        cardContainer.appendChild(card)
    }
}

const lastCardObserve = new IntersectionObserver((entries)=>{
    const lastCard = entries[0]
    if(!lastCard.isIntersecting) return ;
    loadNewCards();
    lastCardObserve.unobserve(lastCard.target)
    lastCardObserve.observe(document.querySelector(".card:last-child"))
},{
    rootMargin:"100px"
});

lastCardObserve.observe(document.querySelector(".card:last-child"))