[iscroll] iscroll 샘플
- 세로 스크롤 적용
- 세로스크롤바 숨기기
- 가로 스크롤 적용
- 가로스크롤바 숨기기
- 가로/세로 스크롤 적용
- 가로/세로스크롤바 숨기기
- 폼요소에 포커스되지 않는 이슈 해결
- 폼요소에 포커스되면 자동 스크롤
- 폼요소에 포커스되어 있고 가상키보드 활성화시 스크롤이슈 해결
- bounce해제
- 관성해제
- 스크롤후 스크롤바 자동 숨기기
- iscroll해제, 새로생성, 높이 새로고침
- 밀어서 컨텐츠 더보기 구현
- windows8(태블릿 디바이스) ie10에서 iscroll 작동안하는 문제 (2013/3/27일 추가)
세로 스크롤 적용
가장많이 사용되는 설정입니다.
세로로 스크롤되는 iscroll세팅하기
var iscroll = new iScroll("wrapper", {
hScroll:false
});
세로스크롤바 숨기기
세로로 스크롤 되면서 스크롤바 숨기기
var iscroll = new iScroll("wrapper", {
hScroll:false,
vScrollbar:false
});
가로 스크롤 적용
가로로만 스크롤 적용하기
var iscroll = new iScroll("wrapper", {
vScroll:false
});
가로스크롤바 숨기기
가로만 스크롤 되면서 스크롤바 숨기기
var iscroll = new iScroll("wrapper", {
vScroll:false,
hScrollbar:false
});
가로/세로 스크롤 적용
가로,세로 양방향 스크롤 생성입니다.
var iscroll = new iScroll("wrapper");
가로/세로스크롤바 숨기기
var iscroll = new iScroll("wrapper", {
vScrollbar:false,
hScrollbar:false
});
폼요소에 포커스되지 않는 이슈 해결
iscroll상에서 input, textarea등 폼요소에 포커스를 주면 포커스 되지 않는 경우가 있습니다.
이것은 폼요소에서도 터치하면 스크롤이 되게 하기 위하여
iscroll 내부적으로 event.preventDefault() 옵션을 적용해서 요소 자체적으로 가지고 있는 이벤트를 막아 버렸기 때문입니다.
포커스가 필요한 요소는 예외처리한 코드입니다.
var iscroll = new iScroll("wrapper", {
useTransform:false,
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();
}
})
폼요소에 포커스되면 자동 스크롤
스마트폰은 폼요소에 포커스가 되면 가상 키보드가 나타나서 디바이스의 높이값이 바뀌게 됩니다.
그래서 input요소가 화면의 아랫부분에 있을경우 input이 가상 키보드에 가려지는 문제가 생깁니다.
input에 포커스를 주면 자동으로 위치를 조정하는 코드입니다.
var iscroll = new iScroll("wrapper", {
useTransform:false,
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();
},
onBeforeScrollEnd: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA'){
}else{
var scrollPosY = -1 * (target.offsetTop - 50);
target.focus()
setTimeout(function(){ iscroll.scrollTo(0, scrollPosY, 200) }, 500);
}
}
})
폼요소에 포커스되어 있고 가상키보드 활성화시 스크롤이슈 해결
비슷한 경우인데 가상키보드가 활성화되면 디바이스의 높이값이 변합니다.
이때 iscroll은 높이값이 전달되지 않아 스크롤 영역이 가상키보드 이전의 높이로 유지되는 경우가 있습니다.
아래 코드는 가상 키보드가 활성화되면 높이값을 반영하여 iscorll을 재설정합니다.
PC상에서는 브라우저 사이즈를 변경하면 적용되는 모습을 볼수 있습니다.
var iscroll = new iScroll("wrapper", {
useTransform:false,
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();
},
onBeforeScrollEnd: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA'){
}else{
var scrollPosY = -1 * (target.offsetTop - 50);
target.focus()
setTimeout(function(){ iscroll.scrollTo(0, scrollPosY, 200) }, 500);
}
},
onRefresh: function(){
//키패드 활성화시 onRefresh 이벤트가 발생하며, wrapper의 높이를 재설정하면 됩니다.
wrapper.style.height = window.innerHeight-100+"px"
}
})
bounce해제
스크롤 끝에서 반동되는 효과 없애기
var iscroll = new iScroll("wrapper", {
bounce:false
})
관성해제
스크롤을 던져지는 효과 없애기
var iscroll4 = new iScroll("wrapper4", {
momentum:false
})
스크롤후 스크롤바 자동 숨기기
var iscroll = new iScroll("wrapper", {
hideScrollbar:true
})
iscroll해제, 새로생성, 높이 새로고침
iscroll해제와 새로 생성, 그리고 컨텐츠의 양이 변경되어 높이값을 새로 지정할수 있습니다.
//iscroll해제, 새로생성, 높이 새로고침
var iscroll;
function loaded(){
iscroll = new iScroll("wrapper");
}
document.addEventListener('DOMContentLoaded', loaded, false);
var btnDestroy = document.querySelector("#btnDestroy");
var btnInit = document.querySelector("#btnInit");
var btnRefresh = document.querySelector("#btnRefresh");
var scroll = document.querySelector("#scroll");
//iscroll해제
btnDestroy.addEventListener("click", function(){
iscroll.destroy();
iscroll = null;
}, false);
//새로생성
btnInit.addEventListener("click", function(){
if(iscroll == null){
iscroll = new iScroll("wrapper");
}
}, false);
//높이 새로고침
btnRefresh.addEventListener("click", function(){
for(var i=0; i<5; i++){
scroll.innerHTML += "<p>컨텐츠</p>";
}
iscroll.refresh();
}, false);
밀어서 컨텐츠 더보기 구현
//밀어서 컨텐츠 더보기 구현
var iscroll
function loaded(){
var isLoadMore = false;
iscroll = new iScroll("wrapper", {
onRefresh: function () {
document.querySelector('#moreMsg').innerHTML = '화면을 위로 밀면 업데이트 됩니다.';
},
onScrollMove: function () {
if(this.y < (this.maxScrollY - 10)){
document.querySelector('#moreMsg').innerHTML = '손을 놓으면 업데이트 됩니다.';
isLoadMore = true;
}
},
onScrollEnd: function () {
if(isLoadMore){
document.querySelector('#moreMsg').innerHTML = '불러오는 중';
loadMoreData();
isLoadMore = false;
}
}
});
}
document.addEventListener('DOMContentLoaded', loaded, false)
function loadMoreData(){
setTimeout(function () {
el = document.querySelector("#thelist");
for (var i=0; i<3; i++) {
li = document.createElement('li');
li.innerText = "컨텐츠 더보기";
el.appendChild(li, el.childNodes[0]);
}
iscroll.refresh();
}, 1000);
}
windows8(태블릿 디바이스) ie10에서 iscroll 작동안하는 문제
windows8 태블릿 장비에서 iscroll이 작동안하는 문제가 발생합니다.
이럴경우
html태그에 style="-ms-content-zooming:none" 스타일을 줘서 확대/축소하지 못하게 하고
body태그에 style="overflow:hidden"를 줘서 스크롤에 바운스되지 않게 설정하면 iscroll이 작동합니다.
<!doctype html><html style="-ms-content-zooming:none"><head><title></title></head><body style="overflow:hidden"><div id="a"><div><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div></div><script type="text/javascript">document.addEventListener('DOMContentLoaded', function(){iscroll = new iScroll('a');}, false)</script></body></html>
댓글