Gray CHA

토이 프로젝트를 진행하면서, 메인 페이지 더보기 기능을 추가해야 했다. 버튼 방식과 무한 스크롤 방식에 대해 고민하였고 모바일 화면에서 좀 더 유연하게 대응할 수 있는 무한 스크롤 방식으로 구현해보았다. 기본개념 웹 브라우저 콘텐츠의 높이값을 이용하면, 쉽게 구현이 가능합니다. 필요한 속성값은 다음과 같습니다. Element.scrollHeight 읽기 전용 속성으로 요소 콘텐츠의 총 높이를 나타내며 화면에 보이지 않는 영역도 포함됩니다. Element.scrollY 읽기 전용 속성으로 콘텐츠가 수직으로 얼마나 스크롤됐는지 표현합니다. Element.clientHeight 읽기 전용 속성으로 엘리먼트의 내부 높이를 표현하며 정확한 영역은 내부 여백(padding)은 포함하지만, 외부 여백(margin)은..