CODEWITHSUNDEEP
javascriptreactjs
meerkat
meerkat

Reputation: 1122

Simple Intifite Scroll in div (React)

I have an array with elements that I want to present in a div with height 150px with an infinite scroll.

I have looked into the Intersection Observer, but I cannot find anything I can use, since my use case is so simple. The elements I want to introduce an infinite scroll look like this:

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>

I would like to have the infinite scroll inside the Container div.

Upvotes: 0

Views: 404

Answers (1)

keyhan
keyhan

Reputation: 522

(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>

Using this nice tutorial: JavaScript Infinite Scroll

Upvotes: 1

Related Questions