JavaScript를 사용한 무한 스크롤 이해 및 구현-JS 튜토리얼-php.cn

JavaScript를 사용한 무한 스크롤 이해 및 구현

王林

풀어 주다： 2024-07-23 12:35:31

원래의

745명이 탐색했습니다.

Entendendo e Implementando o Scroll Infinito com JavaScript

무한 스크롤이란 무엇입니까?

페이지를 아래로 스크롤하면 제품이 계속해서 나타나는 온라인 상점과 같은 사이트를 이미 보신 적이 있을 것입니다. 또 다른 예는 unlimited.horse입니다. 단순해 보일 수도 있지만 "Infinite Scrolls"의 기능을 보여주는 훌륭한 예입니다. 웹사이트에 접속하면 말이 보이지만, 페이지를 아래로 스크롤하면 말의 다리가 무한정 계속 자라며, 결코 말의 발에 닿지 않는다는 것을 깨닫게 됩니다.

무한 스크롤 구현

이 기능은 현대 개발에서 널리 사용됩니다. Twitter, Facebook, 특히 Instagram과 같은 주요 소셜 네트워크에서 페이지를 아래로 스크롤해도 콘텐츠가 끝나지 않는 것처럼 보이는 무한 스크롤을 볼 수 있습니다.

이 기사에서는 이 기능의 기본 구현을 보여 드리겠습니다. 그러나 이 접근 방식은 긴 쿼리 문제, 캐싱 구현 및 프로덕션 애플리케이션에 필요한 기타 솔루션과 같은 문제를 해결하지 않습니다. 그래도 이는 이 기능을 구현하는 방법을 이해하기 위한 출발점입니다.

1단계: 무한 스크롤 기능을 추가할 위치 결정

먼저 무한 스크롤 기능을 어디에 추가할지 결정하세요. 게시물 목록일까요, 아니면 이미지일까요? 또한 데이터의 출처를 결정해야 합니다. 이 예에서는 기본 API인 Random Fox API의 이미지를 사용합니다.

2단계: HTML 파일 만들기

HTML 파일을 만들고 임의의 여우 이미지를 위한 컨테이너를 포함하세요.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fox Images</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header">Fox Images</h1>
<div class="container"></div>
<script src="script.js"></script>
</body>
</html>

로그인 후 복사

3단계: CSS 파일 만들기

이 예에서는 스타일시트를 매우 단순하게 유지하겠습니다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

로그인 후 복사

4단계: JavaScript 파일 만들기

컨테이너를 선택하고 Random Fox API URL을 가져옵니다. HTML에 JavaScript와 CSS 파일을 연결하는 것을 잊지 마세요.

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i < numImages) {
    const img = document.createElement('img');
    img.src = `${URL}${getRandomNumber()}.jpg`;
    container.appendChild(img);
    i++;
  }
}

loadImages();

로그인 후 복사

5단계: 스크롤 이벤트 추가

무한 스크롤 기능을 구현하려면 다음 이벤트 리스너를 추가하세요.

window.addEventListener('scroll', () => {
  if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});

로그인 후 복사

scrollY와 innerHeight의 합이 scrollHeight보다 크거나 같으면 문서의 끝에 도달했기 때문에 더 많은 이미지를 로드해야 함을 의미합니다.