Translate

2014년 6월 5일 목요일

[Android] Android 2.x 에서 Div Element 의 Scroll 이 적용되지 않는문제




모바일 페이지 제작을 하다가 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



댓글 없음 :

댓글 쓰기