모바일 페이지 제작을 하다가 Android 2.x 버전에서는 Div 의 스크롤이 적용되지 않는 문제를 발견했다.
찾아보니 다음과 같다고 한다.
OS ver: Android 2.x
Element: Div
Attribute: overflow:auto/scroll is ignored
참고: 하단의 소스에서 <br/> 부분이 보여지지 않음.
위와 같은 상황이라면 아래의 소스는 Android 2.x 에서 동작하지 않는다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrapperDiv {
height:100px;
overflow: scroll;
background-color:#edffbc;
}
#content {
background-color: #adffe9;
}
</style>
</head>
<body>
<div id="wrapperDiv">
<div id="content">
1111111111<br/>
2222222222<br/>
3333333333<br/>
4444444444<br/>
5555555555<br/>
6666666666<br/>
7777777777<br/>
8888888888<br/>
9999999999<br/>
0000000000<br/>
1111111111<br/>
2222222222<br/>
3333333333<br/>
4444444444<br/>
5555555555<br/>
6666666666<br/>
7777777777<br/>
8888888888<br/>
9999999999<br/>
0000000000<br/>
1111111111<br/>
2222222222<br/>
3333333333<br/>
4444444444<br/>
5555555555<br/>
6666666666<br/>
7777777777<br/>
8888888888<br/>
9999999999<br/>
0000000000<br/>
1111111111<br/>
2222222222<br/>
3333333333<br/>
4444444444<br/>
5555555555<br/>
6666666666<br/>
7777777777<br/>
8888888888<br/>
9999999999<br/>
0000000000<br/>
</div>
</div>
</body>
</html>
그래서 이것저것 알아보니 iScroll 을 많이 사용하는 것 같다. 링크
그냥 컨텐츠의 내용을 보여주는 목적만 있다면 위의 것을 사용해도 상관은 없지만
우리는 컨텐츠의 내용중 touch, click 이벤트 발생 시 특정 액션을 수행해야 했다.
iScroll 을 사용 할 수 없는 상황이 되어버렸다.
(iScroll 에서는 touch, click 이벤트 버블을 막아버린다.)
결국 스크립트로 스크롤 기능(플리킹 포함)을 직접 구현을 했다. -_-
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<style type="text/css">
#wrapperDiv {
position: relative;
height:100px;
overflow: auto;
background-color:#edffbc;
}
#content {
width: 100%;
background-color: #adffe9;
}
</style>
<script type="text/javascript">
var android2x = true;//navigator.userAgent.match(/Android 2/);
$(document).ready(function(){
var wrapperDiv = $('#wrapperDiv');
var content = $('#content');
content.css({
position: 'absolute',
top: '0px'
});
var clientY, endY, disY;
var ableDistance, contentTop;
var autoMove = 0;
// Android 2.x 버전에서만 해당 기능이 수행되도록..
// 이외의 버전에서는 overflow:auto 기능을 이용한다.
if (android2x) {
//해당 컨텐츠의 이동 가능한 범위
ableDistance =
-parseInt(content.css('height').replace('px', ''))
+ parseInt(wrapperDiv.css('height').replace('px', ''));
content.bind('touchstart', function(event) {
disY = 0;
clientY = event.originalEvent.touches[0].clientY;
});
content.bind('touchmove', function(event) {
disY = event.originalEvent.touches[0].clientY - clientY;
clientY = event.originalEvent.touches[0].clientY;
contentTop = parseInt(content.css('top').replace('px', '')) + disY;
if (contentTop < 0 && contentTop > ableDistance) {
content.css({'top' : contentTop + 'px'});
}
});
// 플리킹 기능 구현 (easing:easeOutExpo 을 사용하기 위해 jquery ui 가 필요)
content.bind('touchend', function(event) {
autoMove = disY * 5;
contentTop += autoMove;
if (contentTop > 0) {
contentTop = 0;
}
if (contentTop < ableDistance) {
contentTop = ableDistance;
}
if (-2 > disY || disY > 2) {
content.animate({
'top' : contentTop + 'px'
}, 500, 'easeOutExpo');
}
});
}
});
</script>
</head>
<body>
<div id="wrapperDiv">
<div id="content">
1111111111<br/>
2222222222<br/>
3333333333<br/>
4444444444<br/>
5555555555<br/>
6666666666<br/>
7777777777<br/>
8888888888<br/>
9999999999<br/>
0000000000<br/>
1111111111<br/>
2222222222<br/>
3333333333<br/>
4444444444<br/>
5555555555<br/>
6666666666<br/>
7777777777<br/>
8888888888<br/>
9999999999<br/>
0000000000<br/>
1111111111<br/>
2222222222<br/>
3333333333<br/>
4444444444<br/>
5555555555<br/>
6666666666<br/>
7777777777<br/>
8888888888<br/>
9999999999<br/>
0000000000<br/>
1111111111<br/>
2222222222<br/>
3333333333<br/>
4444444444<br/>
5555555555<br/>
6666666666<br/>
7777777777<br/>
8888888888<br/>
9999999999<br/>
0000000000<br/>
</div>
</div>
</body>
</html>
PS.
iframe 또한 scroll 이 되지 않으므로 해당 페이지에서 scroll 처리가 필요하다.
http://1004lucifer.blogspot.kr/2014/06/android-android-2x-iframe-scroll-height.html
댓글
댓글 쓰기