본문 바로가기

WEB/내맘대로 코딩

일반스크롤 vs 아이스크롤

일반스크롤과 아이스크롤의 차이점이 뭘까?

리소스의 부담이 덜하고 접근성 측면에서 무난한 일반스크롤이 좋은 건가, 일반스크롤을 흉내낸 아이스크롤이 좋은 건가? 브라우저별 제약이 많았던 과거에 비해 현재는 차이가 거의 없어져서, 아이스크롤의 장점이 퇴색해버렸지만, 그래도 아이스크롤이 좀더 부드럽게 동작되는 것 같고 플러그인이라서 지원되는 api도 많아 응용이 가능한 점에 비추어볼때 장점이 많은것도 같고 진정한 승자는?

오늘 구현할 내용은 특히 탭 영역에 자주 출몰하고(?), 내용이 길어질 경우 스크롤이 생겨 스크롤시 더 내용이 있다는 걸 암시하도록 양쪽에 그라데이션 처리나 버튼을 두는 경향이 있는데 일반스크롤과 아이스크롤 두 버전으로 만들어본다. 출처는 codepen.io 타이틀에 적어두었다.

<div class="box_tab">
    <button type="button" class="ico_edge left">왼쪽으로 스크롤이 가능합니다.</button>
    <div class="scroller">
        <ul class="list_nav">
            <li class="on"><a href="javascript:;"><span class="txt">뽀</span></a></li>
            <li><a href="javascript:;"><span class="txt">보영</span></a></li>
            <li><a href="javascript:;"><span class="txt">뽀야</span></a></li>
            <li><a href="javascript:;"><span class="txt">보영이뿌니</span></a></li>
            <li><a href="javascript:;"><span class="txt">박보영</span></a></li>
            <li><a href="javascript:;"><span class="txt">보영커엽</span></a></li>
            <li><a href="javascript:;"><span class="txt">뽀블리</span></a></li>
            <li><a href="javascript:;"><span class="txt">박보영찐팬</span></a></li>
            <li><a href="javascript:;"><span class="txt">박보영사랑해</span></a></li>
        </ul>
    </div>
    <button type="button" class="ico_edge right">오른쪽으로 스크롤이 가능합니다.</button>
</div>
*{margin:0;padding:0;}
ul,li{list-style:none}
a{text-decoration:none;}
button{border:0}
/* 양쪽 버튼 버전 */
.box_tab {position:absolute;width:100%;height:40px;overflow:hidden}
.box_tab .scroller {overflow:hidden;overflow-x:auto;width:100%;height:100%;padding-bottom:17px;-webkit-overflow-scrolling:touch;}
.box_tab .ico_edge {display:none;position:absolute;z-index:10;top:0;right:0;width:40px;height:40px;color:transparent;background:url(ico_navigation_edge2.png) no-repeat 0 0;background-size:100%}
.box_tab .ico_edge:first-child{display:none;position:absolute;z-index:10;top:0;left:0;width:40px;height:40px;color:transparent;background:url(ico_navigation_edge1.png) no-repeat 0 0;background-size:100%}
.list_nav {display:table;width:100%;height:40px}
.list_nav li {display:table-cell;}
.list_nav a {display:block;height:100%;padding:0}
.list_nav li:first-child a {margin-left:17px}
.list_nav li:last-child a {margin-right:17px}
.list_nav .txt {display:block;position:relative;height:40px;padding:9px 10px 7px 10px;box-sizing:border-box;font-weight:bold;font-size:0.875rem;line-height:24px;text-align:center;white-space:nowrap}
.list_nav .txt:after {content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background-color:crimson;opacity:0}
.list_nav .on .txt {color:crimson}
.list_nav .on .txt:after {opacity:1}
/* 양쪽 그라데이션 버전 */
.box_tab .scroller:before, 
.box_tab .scroller:after{position:absolute;top:0;z-index:10;width:22px;height: 40px;background: url(sp_hm.png) no-repeat;background-size: 250px auto;content: '';}
.box_tab .scroller:before {display:none;left:0;background-position:-160px 0;}
.box_tab .scroller:after{right:0;background-position: -136px 0;}
.box_tab .scroller.left:before{display:block}
.box_tab .scroller.right:after{display:none}
/* 양쪽 버튼 버전 */
$(document).ready(function() {

    $(window).on('resize', function() {
        if ($('.ico_edge').length) {
            if ($('.box_tab .list_nav').width() <= $('.box_tab .scroller').width()) {
                $('.ico_edge').hide();
            } else {
                //스크롤 좌측값이 끝에 닿으면 (끝에서 5만큼 작은 범위를 초과하면)
                if ( $('.scroller').scrollLeft() >= $('.list_nav').width() - $('.scroller').width() - 5 ) { //5는 오차범위
                    $('.ico_edge.right').hide(); //우측 edge 영역을 숨기고
                } else {                    
                    if( $('.scroller').scrollLeft() == 0 ){
                        $('.ico_edge.left').hide(); //좌측 edge 영역을 숨기고
                        $('.ico_edge.right').show(); //우측 edge 영역을 보이고
                    }else{
                        $('.ico_edge.left').show(); //좌측 edge 영역을 보이고
                        $('.ico_edge.right').show(); //우측 edge 영역을 보이고
                    }
                }
            }
            $('.scroller').on('scroll', function() {
                if ( $('.scroller').scrollLeft() >= $('.list_nav').width() - $('.scroller').width() - 5 ) { //5는 오차범위
                    $('.ico_edge.right').hide(); //우측 edge 영역을 숨기고
                } else {                    
                    if( $('.scroller').scrollLeft() == 0 ){
                        $('.ico_edge.left').hide(); //좌측 edge 영역을 숨기고
                        $('.ico_edge.right').show(); //우측 edge 영역을 보이고
                    }else{
                        $('.ico_edge.left').show(); //좌측 edge 영역을 보이고
                        $('.ico_edge.right').show(); //우측 edge 영역을 보이고
                    }
                }
            });
//클릭시 이동기능은 번외로 추가 (현재 머무르는 프로젝트에서 사용할 것 같다)
            $('.ico_edge').on('click', function(){
                if( $(this).hasClass('left') ){
                    console.log('왼쪽 버튼 클릭');
                    $('.box_tab .scroller').animate({
                       scrollLeft: 0 
                    },250);

                }else{
                    console.log('오른쪽 버튼 클릭');
                    $('.box_tab .scroller').animate({
                       scrollLeft: $('.list_nav li:last-child').offset().left + $('.list_nav li:last-child').width()
                    },500);
                }
            });
        }
    }).trigger('resize');
});
/* 양쪽 그라데이션 버전 */
var gnbMenu = function(){
    var tab_trans_pos,
        home_tab_category_list = $('#home_tabs_scroll .list_nav'),
        scrollTabRight,
        gnbScroll,
        boxW = 0,
        liW = 0;

    function tab_trans_pos_check(){
        var sTop = home_tab_category_list.css('transform').split('(')[1].split(')')[0].split(',')[4];
        tab_trans_pos = sTop;
    }

    $('#home_tabs a').each(function(){
        liW = $(this).width();
        boxW += liW;
    });
    
    $scrollTab = $('#home_tabs_scroll');
    scrollTabRight = -(boxW-$(window).width()); //끝에 닿을때 기준
    gnbScroll = new iScroll('home_tabs_scroll', {
        vScroll:false,
        hScrollbar:false,
        vScrollbar:false,
        hideScrollbar:true,
        checkDOMChanges:true,
        onRefresh:function(){

        },
        onScrollMove :function(){
            tab_trans_pos_check();
            if(tab_trans_pos >= 0){
                $scrollTab.removeClass('left');
            }else{
                $scrollTab.addClass('left');
            }
            if(tab_trans_pos >= scrollTabRight){
                $scrollTab.removeClass('right');
            }else{
                $scrollTab.addClass('right');
            }
        },
        onScrollEnd :function(){
            tab_trans_pos_check();
            if(tab_trans_pos == 0){
                $scrollTab.removeClass('left');
            }else if(tab_trans_pos == scrollTabRight){
                $scrollTab.addClass('right');
            }
        }
    });
}
$(document).ready(function() {
    gnbMenu();
});

양쪽 버튼 버전 (출처: 신한카드 메인)

See the Pen poEdmVr by rainydaymusickr (@rainydaymusickr) on CodePen.




양쪽 그라데이션 버전 (출처: 지마켓 메인)

See the Pen oNzoRMO by rainydaymusickr (@rainydaymusickr) on CodePen.

'WEB > 내맘대로 코딩' 카테고리의 다른 글

드래그로 정렬가능한 컴포넌트  (0) 2021.01.05
셀렉트박스 url 이동  (0) 2020.12.27
일반스크롤 vs 아이스크롤  (0) 2020.12.27
깜박임 효과  (0) 2020.12.15
배열메서드 - 필터링[2]  (0) 2020.05.05
배열메서드 - 필터링[1]  (0) 2020.05.05

태그