HTML/CSS Infinite scrolling 구현

parallax scrolling 처럼 대세가 되어버린 infinite scrolling을 구현해봤다.

1. 준비

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
 
  <title>infinite scroll</title>
</head>
<body>
  <div class="container">
    <ul class="infinite-list">infinite list</ul>
  </div>
</body>
<script type="text/javascript" src="./index.js"></script>
</html>
/* index.css */
.infinite-list {
  /* We need to limit the height and show a scrollbar */
  width: 200px;
  height: 300px;
  overflow: auto;

  /* Optional, only to check that it works with margin/padding */
  margin: 30px;
  padding: 20px;
  border: 10px solid black;
}

/* Optional eye candy below: */
li {
  padding: 10px;
  list-style-type: none;
}
li:hover {
  background: royalblue;
}
// index.js
const listElm = document.querySelector('.infinite-list');
let itemNum = 1;

const loadMoreList = () => {
  for (let i = 0; i < 10; i++) {
    const item = document.createElement('li');
    item.innerText = 'Item ' + itemNum++;
    listElm.appendChild(item);
  }
}

listElm.addEventListener('scroll', () => {
  if(listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
    loadMoreList();
  }
});

// Initially load items
loadMoreList();

js 파일로 for 문을 돌려서 원하는 값을 createElement / innerText 로 넣으면 됐다.
만약 서버나 API가 있다면 그 값을 넣어주면 될 것이다.

2. 결과

스크롤이 바닥에 닿으면 계속해서 10개씩 아이템이 늘어난다.

NEXT.js> 레이아웃 링크 및 CSS
[Born2beroot] Peer to peer evaluation

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage