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