toggle menu

[JavaScript] 페이지 끝에서 종료되는 페이지 자동 스크롤

2013. 1. 17. 18:22 JavaScript
모바일 환경에서 사용할 목적으로 페이지 자동 스크롤 스크립트를 작성했다.
인터넷 상에는 다양한 페이지 자동 스크롤 소스가 있지만, 페이지 끝에서 알아서 종료되는 소스는 찾기가 어려워서 대충 하나를 만들어봤다.
웹킷 기반만을 고려했기 때문에 익스플로러에서는 동작하게 하려면 약간 수정해주어야 한다.
(어디를 수정해야하는지는 마지막에 설명해 두었다)

var ScrollClass = (function() {
	var timeoutID;

	function _setScroll (previousPosision) {
		if( previousPosision != window.pageYOffset ) {
			/*33으로 해야 1000/33 = 30 으로 초당 30회 화면 전환이 일어나 부드럽게 스크롤된다.*/
			timeoutID = window.setTimeout("ScrollClass.setScroll(" + window.pageYOffset + ")", 33);
			window.scrollBy(0, 1);
		}
		else {
			timeoutID = window.clearTimeout(timeoutID);
		}
	}
     
	function _toggleScroll () {
		if( timeoutID ) {
			timeoutID = window.clearTimeout(timeoutID);
		}
		else {
			_setScroll();
		}
	}
 
    return { setScroll : _setScroll, toggleScroll : _toggleScroll };
})();
 
//스크롤 시작/중단 : ScrollClass.toggleScroll();



너무 단순한 구조라 크게 설명할 것은 없고, 페이지 끝부분을 인식하는 방법에 대해 설명해보면,
일단 현재 스크롤 위치를 저장한 뒤에, 약간 스크롤을 시켜보고 스크롤 시도 후 위치와 비교해서 위치 변화가 없으면 페이지 끝으로 인식하는 방식이다.

선언한 뒤에, ScrollClass.toggleScroll() 메서드를 호출하면 스크롤이 시작되고 다시 호출하면 스크롤이 중단된다. 물론 페이지 끝에 도달하면 자동으로 스크롤이 멈춘다.


익스플로러8의 경우 window.pageYOffset 이나 window.scrollY 속성을 지원하지 않는다.
이를 대체해서 document.body.scrollTop 속성으로 바꾸어주면 IE8에서도 동일한 기능을 구현할 수 있다.


JavaScript 관련 포스팅 더보기