时间戳

首页 > 解决方案 > div 中的简单 Intifite Scroll (React)

javascript - div 中的简单 Intifite Scroll (React)

问题描述

我有一个数组，其中包含我想在高度为 150px 的 div 中呈现的元素，并具有无限滚动。

我查看了 Intersection Observer，但我找不到任何可以使用的东西，因为我的用例非常简单。我要引入无限滚动的元素如下所示：

const data = ["honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota"]


<Container>
    <ul>
      {data.map((d, index) => (
        <li key={`${index}`}>
          <div>
                <span>some text</span>
                <span>some text</span>
                <span>some text</span>
          </div>
        </li>
      ))}
    </ul>
</Container>

我想在 Container div 中有无限滚动。

标签： javascriptreactjs

解决方案

(function () {
    const containerEl = document.querySelector('container');
    const itemsEl = document.querySelector('.items');
    const loaderEl = document.querySelector('.loader');
    const items = ["honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab", "toyota","honda", "vw","opel", "saab"];
    const getItems = (page,limit) => {
       const data = {'data':items.slice((page - 1)*limit,page*limit), 'total':items.length}
       return data;
    }
    const showItems = (items) => {
        items.forEach(item => {
            const itemEl = document.createElement('item');
            itemEl.classList.add('item');
            itemEl.innerHTML = `${item} `;
            itemsEl.appendChild(itemEl);
        });
    };
    const hasMore = (page, limit, total) => {
        const startIndex = (page - 1) * limit + 1;
        return total === 0 || startIndex < total;
    };
    const loadItem =  (page, limit) => {
      if (hasMore(page, limit, total)) {
        const fetched=getItems(page, limit);
        showItems(fetched['data']);
        total = fetched['total'];
      }
    };
    let currentPage = 1;
    let limit = 6;
    let total = 0;
    containerEl.addEventListener('scroll', () => {
        const {
            scrollTop,
            scrollHeight,
            clientHeight
        } = containerEl;
        if (scrollTop + clientHeight >= scrollHeight - 5 &&
            hasMore(currentPage, limit, total)) {
            currentPage++;
            loadItem(currentPage, limit);
        }
    }, {
        passive: true
    });
    loadItem(currentPage, limit);
})();
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:150px;
    background:#999999;
    overflow:scroll;
}
.items {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.item {
    position: relative;
    font-size: 20px;
    line-height: 1.7em;
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Infinite Scroll</title>
</head>
<body>
<Container>
    <div class="items"></div>
</Container>
</body>
</html>

使用这个不错的教程： JavaScript Infinite Scroll

推荐阅读