-
(기능추가3-1) 무한스크롤 구현하기프로젝트/프로젝트_사진첩 2023. 8. 21. 23:03
참고한 영상 : https://www.youtube.com/watch?v=9WQBaQs1hC8
사진첩에 무한스크롤을 구현하기 위해서 위 영상을 시청했다.
영상속 방법은 간단했다
1. window.onscroll 함수로 스크롤 이벤트가 발생할때마다 함수를 실행함
2. window.innerHeight로 사용자가 화면에서 보는 높이(고정) + window.scrollY로 스크롤이 얼마나 이동했는지(변동)를 더하여 document.body.offsetHeight 보다 큰지 계산함.(즉 스크롤이 끝에 거의 도달했을때 실행됨)
3. toAdd이라는 변수에 document.createElement로 div 태그를 추가하고,
toAdd.classList.add를 통해 클래스를 삽입하여 css가 적용되게 만들고, toAdd.textContext로 글자를 넣음
4. 그리고 완성된 toAdd 변수를 .appendChild()로 section 태그의 아래에 삽입함.
전체코드
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html, body {margin:0px;}section .box{height: 500px;background : tomato;color : white;box-sizing : border-box;padding : 30px 10px;}section .box:nth-child(2n) {background : teal;}</style></head><body><section><div class="box">1번째 블록</div><div class="box">2번째 블록</div></section><script>var count = 2;window.onscroll = function() {if((window.innerHeight + Math.ceil(window.scrollY)) >= document.body.offsetHeight) {var toAdd = document.createElement('div');toAdd.classList.add('box')toAdd.textContent = `${++count}번째 블록`document.querySelector('section').appendChild(toAdd);}}</script></body></html>수정된 사항
-window.scrollY가 math.ceil로 묶인 이유는, 이 함수가 소수점으로 표현되어 스크롤의 정확도가 떨어지기 때문이다. 그래서 올림을 통해 정수로 반환하는 Math.ceil을 사용하여 스크롤의 정확도를 높였다.
적용방안
-비슷한 방법으로 사진첩을 만들때 이러한 방식을 활용해서 6개씩 사진을 불러올수 잇도록 적용가능해보인다.
다만 사진을 불러오는것은 백엔드와 데이터베이스 기초들을 알고 난 후에 짤 수 있을것 같다.
'프로젝트 > 프로젝트_사진첩' 카테고리의 다른 글
(기능추가5-1) 업로드, 로드기능 구현하기 (0) 2023.09.05 (기능추가 3-2) 무한스크롤 적용하기 (0) 2023.08.22 (기능추가2) grid와 fixed를 이용한 상단바 꾸미기 (0) 2023.08.19 (기능추가1)label태그를 이용한 업로드 버튼 꾸미기 (2) 2023.08.17 사진첩 프로젝트(230817 기능 추가 기획) (0) 2023.08.17