반응형
<div id="data" style="overflow: auto">
<div> DIV ENTRY </div>
<div> DIV ENTRY </div>
<div> DIV ENTRY </div>
...
</div>
id 가 data 인 div 에 무한스크롤을 적용할 때
scroll 이벤트 발생시 아래 조건에 의해 함수가 실행되도록 작성한다.
document.querySelector('#data').scrollTop + document.querySelector('#data').offsetHeight >= document.querySelector('#data').scrollHeight + 10(offset용)
// + 10을 해준 이유는 스크롤 최하단이 scrollHeight값보다 1픽셀 작은 경우가 있기 때문에
// 스크롤 최하단에 닿지 않더라도 10픽셀정도 여유를 준 것이다.
// 스크롤 최하단 - 10 에 스크롤이 위치하면 무한 스크롤 함수를 실행하기 위함.
반응형
'JavaScript' 카테고리의 다른 글
String.prototype.localeCompare() 문자열 오름차순 순서 비교 (0) | 2022.01.28 |
---|---|
react 에서 dotenv로 환경변수 사용하기 (0) | 2021.04.15 |
알고리즘 풀이 노션링크 (0) | 2021.03.08 |
Common JS (+이벤트루프) (0) | 2020.11.22 |
React 처음 쓸 때 유의할 점 (0) | 2020.11.22 |
댓글