[javascript & jQuery] 스크롤 문제 해결하기 iScroll.js

 

모바일 view단 작업 시 div가 겹쳐 있을 때 스크롤 이벤트가 정확하게 동작하지 않는 경우가 있다.

 

이럴 때 플러그인을 사용하면 되는데, jScroll.js 가 가장 보편적으로 쓰이고 있다.

 

 

 

** iscroll api 잘 사용 하기 : 

 

https://m.blog.naver.com/PostView.nhn?blogId=romeoh&logNo=140171004949&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

 

** iscroll github 참고 : 

github.com/cubiq/iscroll

 

1. 해당 플러그인을 사용할 때 스크롤을 적용하려는 대상 안쪽에 플러그인 마크업을 해준다. 

 

 

<div class="whole-menu">

                <div id="wrapper" class="wrapper-scroller">

                    <div class="scroller">

                        <ul>

                            <li>

                                <h2 class="js-toggle"><span>a</span></h2>

                                <ul class="whole-sub js-toggle-sub">

                                    <li><a href="#">b</a></li>

                                </ul>

                            </li>

                            <li>

                                <h2 class="js-toggle"><span>쇼핑리스트</span></h2>

                                <ul class="whole-sub dis-none js-toggle-sub">

                                    <li><a href="#">c</a></li>

                                    <li><a href="#">d</a></li>

                                    <li><a href="#">e</a></li>

                                </ul>

                            </li>

                            <li>

                                <h2 class="js-toggle"><span>내 게시글</span></h2>

                                <ul class="whole-sub dis-none js-toggle-sub">

                                    <li><a href="#">f</a></li>

                                </ul>

                            </li>

                            <li>

                                <h2 class="js-toggle"><span>g</span></h2>

                                <ul class="whole-sub dis-none js-toggle-sub">

                                    <li><a href="#">h</a></li>

                                    <li><a href="#">i</a></li>       

                                </ul>

                            </li>

                            <li>

                                <h2 class="js-toggle"><span>j</span></h2>

                                <ul class="whole-sub dis-none js-toggle-sub">

                                    <li><a href="#">k</a></li>

                                    <li><a href="#">l</a></li>

                                    <li><a href="#">m</a></li>

                                    <li><a href="#">n</a></li>

                                </ul>

                            </li>

                        </ul>

                    </div>

                </div>

</div>

 

 

 

 

 

2. id로 스크롤 플러그인을 붙이는 것으로 하고, class를 주어 어디든 활용할 수 있게 응용력을 높여준다. 

 

 

/* scroller */

.wrapper-scroller {

position: absolute;

z-index: 1;

top: 0;

bottom: 0;

left: 0;

width: 100%;

background-color: transparent;

overflow: auto;

}

.wrapper-scroller-e {

top: 1.7%;

}

.scroller {

position: absolute;

z-index: 1;

/* -webkit-touch-callout: none; */

-webkit-tap-highlight-color: rgba(0,0,0,0);

width: 100%;

padding: 0;

}

 

 

 

3. 스크립트 링크를 걸어주고 커스텀을 해주면 끝.

 

 

<!-- scroll -->

    <script src="/assets/js/iscroll.js"></script>

    <script type="text/javascript">

         // :::::::::::::::::::::: 스크롤 구현 :::

         function loaded() {

         // isPassive();

         myScroll = new iScroll('wrapper', {

            checkDOMChanges: true,

            fadeScrollbars: true,

            interactiveScrollbars: true,

            momentum: true,

            desktopCompatibility: true,

            eventPassthrough: false,

            mouseWheel: true,

            tab: true,

            fixedScrollbar: false, // for android

            hScroll:false,

            vScrollbar:false

        });

        myScroll.refresh();

         }

        document.addEventListener('DOMContentLoaded', loaded);

</script>

 

 

 

** iscroll과 비슷한 스크롤 플러그인 : jscroll

 

https://plugins.jquery.com/jscroll/