무한 스크롤 UI 구현하기
- 구현 방식에는 크게 두가지가 있다.
- window
scroll이벤트롤 통해 스크롤링이 일어날 때 마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠 끝 즈음에 다다랐는지 확인하고 처리하는 방식 intersection observer방식?
scroll 이벤트 이용
JS에서 window 와 viewport
참고해야할 사항
- innerWidth 속성 - 순수 콘텐츠 영역만의 창 너비 (viewport 너비)
- innerHeight 속성 - 순수 콘텐츠 영역만의 창 높이 (viewport 높이)
- outerWidth 속성 - 툴바/스크롤바 등 포함한 창 너비
- outerHeight 속성 - 툴바/스크롤바 등 포함한 창 너비
window.scrollY
- document가 수직으로 얼마나 스크롤 됐는 지 픽셀 단위로 반환
scrollY + window.innerHeight는 viewport의 가장 밑바닥 절대 위치를 알려준다.
clientHeight, offsetHeight, scrollHeight
clientHeight는 요소의 내부 높이이다. 패딩 값은 포함되며, 스크롤바, 테두리, 마진은 제외offsetHeight는 요소의 높이입니다. 패딩, 스크롤 바, 테두리(Border)가 포함되고 마진은 제외된다.scrollHeight는 요소에 들어있는 컨텐츠의 전체 높이입니다. 패딩과 테두리가 포함되고 마진은 제외된다.
스크롤과 관련된 정보
window.pageXOffset 속성은 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져온다.
window.pageYOffset 속성은 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져온다.
window.scrollX 속성은 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져온다.
window.scrollY 속성은 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져온다.
window.scroll() 메서드는 선택한 요소에 스크롤 값을 설정한다.
window.scrollTo() 메서드는 선택한 요소에 스크롤 값(상대 위치)을 설정한다.
window.scrollBy() 메서드는 선택한 요소에 스크롤 값(절대 위치)을 설정한다.
element.scrollLeft 속성은 선택한 요소에 가로 스크롤 값을 가져오거나 설정한다.
element.scrollTop 속성은 선택한 요소에 세로 스크롤 값을 가져오거나 설정한다.
element.scrollIntoView() 메서드는 선택한 요소를 기준으로 이동하거나 설정한다.
무한스크롤을 구현하며 가장 중요한 부분
- 스크롤을 할 때마다 이벤트가 발생한다면 예기치 못한 오류가 발생할 수 있다.
디바운싱
- 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
let timer;
document.querySelector('#input').addEventListener('input', function(e) {
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
// 실행 코드 내용
}, 2000);
});이벤트가 발생할 때마다 이전에 설정해둔 내용을 clear시키고 다시 새로 timer를 설정해준다. 설정해둔 시간(여기서는 2000ms) 내에 이벤트가 다시 발생하지 않으면 이벤트 발생이 끝난 것으로 생각해서 적어둔 코드 내용이 실행된다.
ajax 검색에서 디바운싱을 많이 사용하는 것 같다.
쓰로틀링
- 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
let timer;
document.querySelector('.body').addEventListener('scroll', function (e) {
if (!timer) {
timer = setTimeout(function() {
timer = null;
// 실행할 코드 내용
}, 2000);
}
});timer에 값이 없으면 timer를 설정해준다. 일정 시간이 지난 후에는(위에서는 2000ms) 스스로를 해제시킨 후 작성한 내용을 실행시킨다.
차이점
디바운싱은 이벤트가 연속적으로 계속 발생하더라도 모두 무시하고 설정한 특정 시간동안 이벤트가 발생하지 않았을 때 맨 마지막 이벤트를 딱 한번 발생시킨다. 하지만 쓰로틀링은 설정한 특정 시간 주기로 계속 실행이 된다. 따라서 실행 시키고 싶은 코드 내용이 특정 시간 주기로 실행이 되긴 한다.
Intersection Observer
intersection observer는 Target Element 가 화면에 노출되었는 지 여부를 간단하게 구독할 수 있는 API 이다.- observe, unobserve를 잘 이해해야 한다. (감시)
threshold(0.5: 절반, 1: 전체)값으로 observe(감시) 대상이 얼마나 노출되어 있는지에 따라 동작하게 할 수 있다.
