모바일) 선택한 탭, 센터로 이동하기

html ---------------------------------------------------------------

  <div class="tabs-container overseas">

                  <ul class="tabs-wrapper">

                                <li class="tab on">

                                    <span class="tab-menu">하와이</span>

                                </li>

                                <li class="tab">

                                    <span class="tab-menu">괌</span>

                               </li>

                                <li class="tab">

                                    <span class="tab-menu">태국</span>

                                </li>

                                <li class="tab">

                                    <span class="tab-menu">베트남</span>

                               </li>

                                <li class="tab">

                                    <span class="tab-menu">일본</span>

                                </li>

                                <li class="tab">

                                    <span class="tab-menu">영국</span>

                                </li>

                                <li class="tab">

                                    <span class="tab-menu">스페인</span>

                               </li>

                                <li class="tab">

                                    <span class="tab-menu">뉴질랜드</span>

                               </li>

                                <li class="tab">

                                    <span class="tab-menu">스위스</span>

                                 </li>

                   </ul>

  </div>

css ---------------------------------------------------------------------

        .tabs-container{

            margin:20px 0;

            .tabs-wrapper{

                width:100vw;

                overflow-x: scroll;

                -ms-overflow-style:none;

                scrollbar-width: none;

                padding:0 0 0 15px;

                box-sizing: border-box;

                display: flex;

                &::-webkit-scrollbar{

                    display: none;

                }

            }

            .tab{

                width:'auto';

                padding: 0 5px;

                box-sizing: border-box;

                .tab-menu{

                    display: block;

                    box-sizing: border-box;

                    width:'auto';

                    font-size: 13px;

                    font-weight: 400;

                    padding:7px 14px 8px;

                    border:1px solid #E1E1E1;

                    border-radius: 100px;

                    white-space: nowrap;

                }

                &.on{

                    .tab-menu{

                        border-color: #000;

                        background-color: #000;

                        color:#fff;

                        font-weight: 700;

                    }

                }

                &:last-child{

                    padding:0 20px 0 5px;

                }

            }

        }

 

 

jquery ------------------------------------------------------------------------------

 

 function moveCenter(e){

        /* 선택한 tab이 center로 이동하는 함수 */

        var $tabContainer = $(e.target).closest('.tabs-container');

        var $tabWrapper = $(e.target).closest('.tabs-wrapper');

        var $tab = $(e.target).closest('.tab');

        // 스크롤 양

        var pos = $tabWrapper.scrollLeft();

        // 컨테이너의 1/2

        var containerWidthHalf = $tabContainer.width() / 2;

        // 선택한 li의 left

        var selectedTarget = $tab.offset().left;

        // 선택한 li의 outerWidth 1/2

        var selectedTargetWidthHalf = $tab.outerWidth() / 2;

        // 이동할 양 계산

        pos += selectedTarget + selectedTargetWidthHalf - containerWidthHalf;

        setTimeout(function(){

            $tabWrapper.stop().animate({

                scrollLeft : pos,

            },300);

        },200);

    }

결과물 ------------------------------------------------------------------

선택한 탭이 센터로 이동함