방구석 개발자의 놀이터

  • 홈
  • 태그
  • 방명록

무한 스크롤 1

[JavaScript] 무한 스크롤 (Infinite Scroll)

무한 스크롤을 하기 앞서 가장 중요한 포인트는 Scroll Bar의 위치를 찾는것이다. 1. Scroll Bar의 위치 찾는법 const onScroll = e => { console.dir(e.target.scrollingElement); } document.addEventListener("scroll", onScroll); 위와 같은 코드를 사용하여 콘솔창을 확인해보면 위와 같이 수많은 정보가 나온다. 여기서 필요한 정보는 scrollHeight: 1231 , scrollTop: 340, clientHeight: 891 이렇게 3가지 정보가 필요하다. 그 이유는!!! 무한 스크롤에서 필요한 Scroll을 가장 아래로 내렸을 때가 바로 body 영역의 총 길이 = scrollHeight = scroll..

Front-End/JavaScript 2021.06.16
이전
1
다음
더보기
프로필사진

게으른 사람들에게 편리함을 제공해 줄 수 있을 때 가장 기쁜 개발자

250x250
  • 분류 전체보기 (102)
    • JAVA (2)
    • Spring (17)
    • Python (14)
    • 회고록 (4)
    • Flutter (3)
    • Git (1)
    • Spring Boot (15)
    • Algorithm (3)
    • AWS (1)
    • Front-End (34)
      • HTML (1)
      • CSS (1)
      • SCSS (2)
      • JavaScript (12)
      • React (13)
      • React-query (1)
      • NextJS (0)
      • Test (1)
    • OpenSource (3)
    • 독서 (0)
    • 강의 (1)
    • Error (4)

Tag

spring, flutter, springframework, aspect, frontend, springboot, es6, PYTHON, javascript, spring boot, 프론트엔드, react, 회고록, component, opensource, lombok, 개발자, front-end, react-router-dom, CSS,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바