작성일 : 16-08-28 04:15
|
[JQuery] 무한 스크롤링 직접구현
|
 |
|
글쓴이 :
조형래
 조회 : 2,637
|
자바스크립트를 사용하여 웹사이트 구축시 무한스크롤(infinite scroll)이란 용어를 자주 들을 수 있습니다. 그럼 무한스크롤이란 과연 무엇이고 자바스크립트 라이브러리인 제이쿼리(jQuery)를 사용하여 무한스크롤을 구현하는 방법에 대해 자세하게 알아보겠습니다. 일단 무한스크롤이란 무엇일가요?
! 자바스크립트의 무한스크롤(Infinite Scroll)이란? 용어알기
; 무한 스크롤이란 화면 인터렉션(Interaction)의 하나로 사용자 행동에 의해 만약 웹페이지 화면에서 스크롤을 브라우저의 끝으로 내리게되면 새로운 콘텐츠가 계속해서 생겨나는 이벤트의 반복을 의미합니다. 방문자는 스크롤을 계속내리면서 새로운 콘텐츠를 페이지 전환없이 볼 수 있게 됩니다. 이런 화면 인터렉션은 사용자가 새로운 콘텐츠를 더 볼 수 있도록 편리한 인터페이스를 제공합니다. 만약 이 방식이 아니라면 사용자는 페이지를 전환할 수 있는 아이콘 등을 클릭하여 다른 콘텐츠... 즉 2페이지, 3페이지 등을 볼 수 있을 것입니다. 이 방식도 나쁜 방식은 아니나 요새는 Ajax를 활용한 무한 스크롤 방식이 굉장히 많이 사용되고 있습니다.
참고로 페이지 전환이 없다는 것은 이탈율(Bounce Rate)을 높이는 원인이 되기도 합니다. 더 쉽고 간단한 UI 제공으로 방문자의 체류시간을 늘릴 수 있겠지만 이탈율이 줄어들 수 있으므로 이를 고려할 필요가 있다하겠습니다. 사실 이탈율, 체류시간 모두 방문자 유입에 대한 공통의 목적을 가지고 있으므로 전체적인 방문자 트래픽에는 큰 영향이 없을 것입니다.
그렇다면 무한 스크롤을 구현하기 위해 무엇을 해야할까요? 기본적으로 다음과 같은 프로세스가 필요합니다.
:+: 무한 스크롤에 필요한 프로세스
1. 스크롤이 페이지 최하단에 위치했는지를 확인
2. 1번에서 최하단이라면 예정된 이벤트(추가 콘텐츠)를 실시
3. 이벤트를 통해 추가되는 콘텐츠가 비동기식(ajax)으로 하단에 추가됨
4. 결론적으로 스크롤이 계속 늘어남
이 무한 스크롤을 구현하기 위해서는 필요한 몇가지 함수를 알아야만하는데요... 여기에 사용되는 함수들은 다음과 같습니다.
$(document).scroll()
// 스크롤이 변경될때마다 이벤트를 발생시킴
$(document).height()
// 현재페이지(문서)의 높이
$(window).height()
// 윈도우의 크기
$(window).scrollTop()
// 브라우저의 스크롤 위치값
위의 함수가 이 무한 스크롤의 핵심적인 부분이라 할 수 있습니다. 현재 페이지의 전체높이가 화면의 스크롤의 위치값과 윈도우의 크기를 합산한 값이 클 경우 해당 함수를 실행하게 됩니다.
현재페이지(문서)의 높이 <= 윈도우의 크기 + 브라우저의 스크롤 위치값
위에서 비동기식 방식에 대하여 언급을 하였습니다. 비동기식(ajax)은 페이지의 전환이 없이도 새로운 데이터를 서버에서 불러와 추가할 수 있는 방법입니다. 무한스크롤은 비동기 방식이 반드시 필요하므로 이에 대하여 알아야합니다. 그럼 아래 예제를 통해 더 자세히 알아보시기 바랍니다.
!! 무한 스크롤 예제소스 보기
<html>
<body>
<div class="aritcleView">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
<script type="text/javascript">
// Add contents for max height
$(document).ready(function () {
$(document).scroll(function() {
var maxHeight = $(document).height();
var currentScroll = $(window).scrollTop() + $(window).height();
if (maxHeight <= currentScroll + 100) {
$.ajax({
...
})
}
})
});
</script>
</html>
위 예제는 webisfree.com의 메인페이지 코드중 일부입니다. 설명하자면... 클래스 articleView에는 몇개의 글(article)이 포함되어 있습니다. 이 글이 스크롤을 내려 최하단에 위치할 경우 scroll 이벤트가 발생하게되며 이 이벤트는 ajax() 비동기함수를 실행하게 됩니다. ajax()가 성공할 경우 해당하는 콘텐츠 영역에 불러온 새로운 글을 추가하게됩니다.
위 예제에서 ajax()를 실행하는 if문을 보시면 maxHeight <= currentScroll + 100이라는 코드가 있습니다. 여기서 100은 현재 스크롤 위치값에 약간의 보정치를 추가한 부분입니다. 이를 사용하여 사용자가 반드시 최하단이 아니라 하단보다 조금 위에 위치했더라도 미리 새로운 콘텐츠가 추가될 수 있습니다. 비동기 방식은 웹콘텐츠를 로딩하는 시간이 발생하므로 최하단값과 스크롤 위치를 동일하게 할 경우 방문자는 조금 늦게 콘텐츠가 보일 수 있으므로 이를 보정하기 위한 값으로 100을 추가했습니다.
100이라는 숫자는 정확한 값이 아니므로 원하는 값을 설정하여 적당한 위치에 도달했을 때 새로운 콘텐츠가 추가될 수 있을 것입니다.
|
|
1758
