横スクロールメニュー

ヌルヌルした横スクロールメニュー。

無限バージョンにしてみた。
メニューをあらかじめてんこ盛り用意しておいて、
疑似無限スクロールにする。

ブラウザサイズによって表示が変わる。
また、 vuetouch.js を インストールしていることが条件。

```

<style>



    .navigation-content {
        position: relative;
        max-width: 834px;
        min-width: 300px;
        width: 100%;
        -webkit-overflow-scrolling: touch;

        color: #b7b7b7 !important;
    }

    .navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        list-style: none;
        overflow-x: auto;
        background: #fff;
    }

    .navigation a {
        display: inline-block;
        padding: 5px 15px;
        word-break: keep-all;
        text-decoration: none;
        border-bottom: 1px solid #e5e5e5;
        width:150px !important;
        background-color: #fff;
    }

    .navigation-selected {
        color: #666 !important;
        font-weight: bold !important;
        border-bottom: 1px solid black !important;
    }





</style>

<template>


    <div>

        <div class="navigation-content" style="margin: auto !important;">
            <nav class="navigation" id="yokonavi">
                <a :disabled="loading" @click="tabSelect(0)" v-bind:class="[
selectedTab === 0 ? 'navigation-selected' : 'elem-inactive'
]">ああイン順</a>

                <a :disabled="loading" @click="tabSelect(1)" v-bind:class="[
selectedTab === 1 ? 'navigation-selected' : 'elem-inactive'
]">いいイン順</a>
                <a :disabled="loading" @click="tabSelect(2)" v-bind:class="[
selectedTab === 2 ? 'navigation-selected' : 'elem-inactive'
]">ううイン順</a>
                <a :disabled="loading" @click="tabSelect(3)" v-bind:class="[
selectedTab === 3 ? 'navigation-selected' : 'elem-inactive'
]">ええイン順</a>
                <a :disabled="loading" @click="tabSelect(4)" v-bind:class="[
selectedTab === 4 ? 'navigation-selected' : 'elem-inactive'
]">おおイン順</a>
                <a :disabled="loading" @click="tabSelect(5)" v-bind:class="[
selectedTab === 5 ? 'navigation-selected' : 'elem-inactive'
]">ききイン順</a>


                <!--ブラウザのサイズによって、メニュー数を変更するか-->

                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(0)" v-bind:class="[
selectedTab === 0 ? 'navigation-selected' : 'elem-inactive'
]">ほげほげ順</a>

                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(1)" v-bind:class="[
selectedTab === 1 ? 'navigation-selected' : 'elem-inactive'
]">いいイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(2)" v-bind:class="[
selectedTab === 2 ? 'navigation-selected' : 'elem-inactive'
]">ううイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(3)" v-bind:class="[
selectedTab === 3 ? 'navigation-selected' : 'elem-inactive'
]">ええイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(4)" v-bind:class="[
selectedTab === 4 ? 'navigation-selected' : 'elem-inactive'
]">おおイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(5)" v-bind:class="[
selectedTab === 5 ? 'navigation-selected' : 'elem-inactive'
]">ききイン順</a>


                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(0)" v-bind:class="[
selectedTab === 0 ? 'navigation-selected' : 'elem-inactive'
]">んあイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(1)" v-bind:class="[
selectedTab === 1 ? 'navigation-selected' : 'elem-inactive'
]">んいイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(2)" v-bind:class="[
selectedTab === 2 ? 'navigation-selected' : 'elem-inactive'
]">んうイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(3)" v-bind:class="[
selectedTab === 3 ? 'navigation-selected' : 'elem-inactive'
]">んえイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(4)" v-bind:class="[
selectedTab === 4 ? 'navigation-selected' : 'elem-inactive'
]">んおイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(5)" v-bind:class="[
selectedTab === 5 ? 'navigation-selected' : 'elem-inactive'
]">んきイン順</a>


                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(0)" v-bind:class="[
selectedTab === 0 ? 'navigation-selected' : 'elem-inactive'
]">ああイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(1)" v-bind:class="[
selectedTab === 1 ? 'navigation-selected' : 'elem-inactive'
]">いいイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(2)" v-bind:class="[
selectedTab === 2 ? 'navigation-selected' : 'elem-inactive'
]">ううイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(3)" v-bind:class="[
selectedTab === 3 ? 'navigation-selected' : 'elem-inactive'
]">ええイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(4)" v-bind:class="[
selectedTab === 4 ? 'navigation-selected' : 'elem-inactive'
]">おおイン順</a>
                <a :disabled="loading" v-bind:style="{ display: displayMode}" @click="tabSelect(5)" v-bind:class="[
selectedTab === 5 ? 'navigation-selected' : 'elem-inactive'
]">ききイン順</a>

            </nav>

        </div>


        <div v-touch:swipe.left="leftSwipe" v-touch:swipe.right="rightSwipe" style="height: 200px;background-color:red;">
            ここをスワイプ
        </div>



    </div>


</template>

<script>

    import InfiniteLoading from 'vue-infinite-loading';
    import {MixInfinit} from './MixInfinit'


    Vue.use(InfiniteLoading, {
        slots: {
            noMore: 'すべて読み込みました', // you can pass a string value
            noResults: '', // you can pass a string value
        },
    });


    export default {

        components: {InfiniteLoading},
        mixins:[MixInfinit],

        data () {
            return {

                width: window.innerWidth,
                height: window.innerHeight,

                displayMode:'',

                data:{
                    x:0,
                    y:0,
                    px:0,
                    py:0,
                    width:0,
                    harf_width:0,
                    screen_width:0,
                    scroll_x:0,
                    scroll_now_x:0,
                    yokonavi_width:0
                },

                selectedTab:1,
                loading:false,
            };
        },



        methods: {

            handleResize() {
                // resizeのたびにこいつが発火するので、ここでやりたいことをやる
                this.width = window.innerWidth;
                this.height = window.innerHeight;

                if(this.width > 834){
                    this.displayMode = 'none';
                } else {
                    this.displayMode = '';
                }

            },

            leftSwipe(){
                // alert("左にスワイプされました");
                if(this.selectedTab != 5){
                    this.selectedTab = this.selectedTab+1;
                } else {
                    this.selectedTab = 0;
                }
            },
            rightSwipe(){
                // alert("右にスワイプされました");
                if(this.selectedTab != 0){
                    this.selectedTab = this.selectedTab-1;
                } else {
                    this.selectedTab = 5;
                }
            },


            tabSelect(data){
                this.selectedTab = data;
            }

        },

        mounted() {
            window.addEventListener('resize', this.handleResize)
        },

        beforeDestroy: function () {
            window.removeEventListener('resize', this.handleResize)
        },


        created () {
            this.selectedTab = 0;
            this.handleResize();
        },

        watch: {

            selectedTab(newVal,oldVal) {

                var targetElement = document.getElementById("yokonavi");
                var clientRect = targetElement.getBoundingClientRect() ;
                let seed = 444;
                let screen_harf_width = window.parent.screen.width/2;
                let minus_seed = screen_harf_width - 207;
                let waku_seed = this.selectedTab*100;
                targetElement.scrollLeft = seed-minus_seed+waku_seed;


            }
        },



    }
</script>


```


コピペで動くよ。