【Nuxt.js】vue-scroll-synで複数のスクロールバーを同時にスクロールする

Nuxt内で複数のtableの横スクロールを同時に制御する事がありましたのでそのやり方を残しておきます。

# vue-scroll-synとは？
複数のスクロールバーを連動させるには`vue-scroll-sync`のライブラリーを使用します。
こちらを使えば縦、横それぞれのスクロールを連動できます。
[vue-scroll-syn](https://www.npmjs.com/package/vue-scroll-sync)

# インストール
## yarn
yarnからインストール
```
yarn add vue-scroll-sync
```

## npm
npmからインストールする
```
npm i --save vue-scroll-sync
```

gitリポジトリはこちら
https://github.com/metawin-m/vue-scroll-sync?ref=kabanoki.net


# ライブラリーの読み込み
単一で読み込む場合は直接importで読み込ませ、
`<scroll-sync></scroll-sync>`で囲えば使えます。

```index.vue
<template>
  <scroll-sync>
      Content
  </scroll-sync>
</template>

<script>
import ScrollSync from 'vue-scroll-sync';
</script>

```

# plugin化する
プラグインでまとめる場合はこのようにします。

```plugins/vue-scroll-sync.js
import Vue from 'vue'
import ScrollSync from 'vue-scroll-sync'

Vue.component('scroll-sync', ScrollSync)

```
nuxt.config.jsにプラグインを読み込ませます。

```nuxt.config.js
module.exports = {
  // 省略
  plugins: ['~plugins/vue-scroll-sync']
  // 省略
}
```

# スクロール位置
縦方向の連動を行う場合verticalを設定します。
横方向の連動を行う場合horizontalを設定します。

```inde.vue
<template>
  <div>
    <!-- 縦方向 -->
    <scroll-sync vertical>
        Content
    </scroll-sync>
    <!-- 横方向 -->
    <scroll-sync horizontal>
        Content
    </scroll-sync>
  </div>
</template>
```

# サンプル
実際にtableで縦横固定ヘッダーでどのような動きになるのかサンプルを作って見ました。

```index.vue
<template>
  <div>
    <scroll-sync
      class="table-wrap"
      v-for="tw of 5"
      :key="tw"
      vertical
      horizontal
    >
      <table class="table">
        <thead class="thead" v-if="tw===1">
          <tr>
            <template v-for="n of 10">
              <th
                class="item"
                :key="n"
                v-if="n===1"
              >項目</th>
              <th
                class="title"
                :key="n"
              >
                タイトル-{{n}}
              </th>
            </template>
          </tr>
        </thead>
        <tbody class="tbody">
          <tr
            v-for="r of 50"
            :key="r"
          >
            <th class="subtitle">
              サブタイトル-{{r}}</th>
            <td
              v-for="c of 10"
              :key="c"
              class="cell"
            >
              セル
            </td>
          </tr>

        </tbody>
      </table>
    </scroll-sync>
  </div>
</template>

<style lang="scss" scoped>
.table-wrap {
  border-bottom: 1px solid #777;
  border-right: 1px solid #ddd;
  width: 800px;
  height: 300px;
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  &::-webkit-scrollbar-track {
    background-color: #e4e4e4;
    border-radius: 100px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d4aa70;
    border-radius: 100px;
  }
  overflow: scroll;
  .table {
    border-collapse:  collapse;
    table-layout: fixed;
    width: 100%;
    th, td {
      border: 1px solid #ddd;
      padding: 10px 5px;
    }
    .item {
      background: #fff;
      width: 200px;
      z-index: 10;
    }
    .title {
      width: 160px;
      background: cornflowerblue;
      color: #fff;
      z-index: 8;
    }
    .subtitle {
      width: 200px;
      background: #AAA;
      color: #fff;
      z-index: 5;
    }
    .cell {
      width: 160px;
    }
    .thead th{
      position: sticky;
      top: 0;
      left: 0;
    }
    .tbody th{
      position: sticky;
      left: 0;
    }
  }
}
</style>

```
あとはこんな感じで連動することできます。
https://codesandbox.io/s/adoring-water-y9eivz?file=/plugins/vue-scroll-sync.js

![スクリーンショット 0004-05-14 22.50.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163786/db92ac80-c56d-b81d-b332-cf5bc0e7ea3f.png)