모바일 브라우저 주소창 안보이게 하기

모바일 웹 개발을 할 때 브라우저의 주소창이 안보이도록 웹페이지를 위로 끌어올려야 할 경우가 있습니다. 그 때 사용할 수 있는 소스코드입니다.

[데모보기] http://codefactory.kr/demos/cfslidepanel 

// 모바일 브라우저 주소창 안보이게 하기
(function() {
	function hideAddressBar() {

		if (document.height <= window.outerHeight) return;		// 웹페이지의 높이가 화면높이보다 작을 때는 실행할 필요가 없으므로 종료

		var scrollTimer = setInterval(function() {
			if ( ! pageYOffset) {	// 모바일 브라우저에서 주소창이 보이고 있을 때는 pageYOffset = 0 이므로 이때만 실행
				scrollTo(0, 1);		// 웹페이지를 x축 0, y축 1의 위치로 끌어올림
			} else {
				clearInterval(scrollTimer);		// pageYOffset !=0 인 경우 반복 종료: scrollTo(0, 1) 이 실행되었거나 사용자가 스크롤을 움직인 경우
			}
		}, 100);	// 100 밀리세컨드마다 반복 실행

	};

	window.addEventListener('load', hideAddressBar, false);		// 페이지 로드 되었을 때 실행
	window.addEventListener('orientationchange', hideAddressBar, false);	// 화면이 가로/세로 전환되었을 때 실행
})();	// 페이지 내 다른 자바스크립트 코드에 영향을 주거나 받지 않도록 self executed anonymous function 형태로 만듬
  • http://www.facebook.com/ Honey

    There is a critical shortage of ifnoramtive articles like this.