iScroll

iScroll : http://cubiq.org/iscroll-4

 

♧ iScroll 기본 셋업

 

- html code

	

		내용
	

 

- css code

#wrapper{
	position:absolute; z-index:1;
	top:45px; bottom:0; left:0;
	width:100%;
	overflow:auto;
}
#wrapper #scroller{
	position:absolute; z-index:1;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

 

- script code

var myScroll;
function loaded() {
	myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

 

♣ 컨텐츠안에 input, select, textarea 를 포함하는 경우

var myScroll;
var myScroll;
function loaded(){
	myScroll = new iScroll('wrapper',{
		useTransform: true,
		onBeforeScrollStart: function (e) {
			var target = e.target;
			while (target.nodeType != 1) target = target.parentNode;
			if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') e.preventDefault();
		}
	});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);