페이지 스크롤이 끝에 다다랐는지 알아내기

최근의 웹 페이지들은 infinite scroll(끝없이 이어지는 스크롤)로 구현되는 경우가 많다. 예를 들어 페이스북이나 트위터도 그렇다. 이런 경향은 아마도 스마트폰과 같은 미디어들의 등장으로 one page 사이트들이 일반화되기 때문인 것 같다. 이러현 경향은 스마트폰 뿐만 아니라 PC의 웹사이트에서도 일반화되는 추세이다.

그러다 보니 페이지의 끝에 스크롤이 이르면 다음 페이지의 내용을 불러와 추가해주는 방식이 활용되고 있다. 그러기 위해서는 스크롤이 페이지의 끝에 다다랐는지 알아내는 것이 필요하다. 여기에 소개하는 코드는 jQuery를 활용해서 어떻게 스크롤이 페이지의 끝(가장 아래쪽)에 이르렀는지 알아내는 것이다.

how to determine if scroll reachs the end of the web page

아래 코드는 스크롤이 페이지의 끝에 다다르면 본문(body)의 배경색이 빨간색으로 바뀌는 예제이다. 여러분은 필요에 따라 색을 바꿔주는 대신 다른 코드를 사용하면 될 것이다.

 

detect page scroll down

Share the joy
  •  
  •  
  •  
  •  

댓글 남기기