【scrollLeft】横スクロールの量によって出し分けをする方法

今回は横スクロールしたときのスクロール量によって要素を出し分けたりする方法について紹介していきたいと思います。

たとえばスクロールに位置が一番左だった場合やスクロールの位置が一番右だった場合に出し分けをしたいときなど。

次は例としてスクロールによって矢印の出し分けをしていきます。

スクロール量によって制御

html

<div class="list ltrt">
    <ul>
        <li><a href="#">タブ1</a></li>
        <li><a href="#">タブ2</a></li>
        <li><a href="#">タブ3</a></li>
        <li><a href="#">タブ4</a></li>
        <li><a href="#">タブ5</a></li>
        <li><a href="#">タブ6</a></li>
        <li><a href="#">タブ7</a></li>
        <li><a href="#">タブ8</a></li>
        <li><a href="#">タブ9</a></li>
        <li><span>タブ10</span></li>
        <li><a href="#">タブ11</a></li>
        <li class="last"><a href="#">タブ12</a></li>
    </ul>
</div>

css

.list{
    margin-top: 20px;
    position: relative;
    padding: 0 15px;
}

.list ul{
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 0;
    padding: 0;
}

.list ul li{
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    font-size: 12px;
}

.list ul li a,
.list ul li span{
    display: block;
    background-color: #aaa;
    font-size: 12px;
    text-align: center;
    padding: 5px 8px;
    color: #fff;
    text-decoration: none;
}

.list.ltrt:before{
    position: absolute;
    content: "";
    left: 5px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-left: solid 1px #aaa;
    border-bottom: solid 1px #aaa;
    transform: rotate(45deg);
}

.list.ltrt:after{
    position: absolute;
    content: "";
    right: 5px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-right: solid 1px #aaa;
    border-bottom: solid 1px #aaa;
    transform: rotate(-45deg);
}

.list.ltrt.rt-only:before{display: none;}
.list.ltrt.lt-only:after{display: none;}

javascript

jQuery(function(){

    jQuery('.list').addClass('ltrt');

    //要素の全体幅
    let $this = jQuery('.list ul');
    let ScrollElemWidth = Math.abs($this.width() - $this.get(0).scrollWidth);

    //読み込み時
    jQuery('.list').addClass('rt-only');
    scroll_check(ScrollElemWidth);

    jQuery('.list ul').scroll(function () {
        scroll_check(ScrollElemWidth);
    });

    function scroll_check(ScrollElemWidth){

        //スクロール量を取得
        let position = jQuery('.list ul').scrollLeft();

        if(position <= 0){
            jQuery('.list').addClass('rt-only').removeClass('lt-only');
        }else if(position >= ScrollElemWidth){
            jQuery('.list').addClass('lt-only').removeClass('rt-only');
        }else{
            jQuery('.list').removeClass('lt-only').removeClass('rt-only');
        }
    }
});

補足

方法としては要素の幅とスクロールしたときのスクロール量を取得して比較を行い、結果としてそれぞれ処理をしています。

要素の幅を取得するときに「Math.abs()」を使用しています。

「Math.abs()」は数値の絶対値を返します。

サンプル