Vueのライブラリに、Vuescrollというものがある。 https://vuescrolljs.yvescoding.org/ これを使うとスクロールバーのカスタマイズが簡単にできる。 マウスオーバー時のみバーを表示したりとか、結構いろいろカスタマイズできて便利だが、tableで使用する場合は少し注意が必要。 ```html <table> <tr class="table-header"> <th>A</th> <th>B</th> </tr> <vur-scroll> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </vur-scroll> </table> ``` こんな感じでtableの中身をスクロールさせようとすると、上手くいかない。直下の要素が複数あると上手く機能しないっぽい。 対策としては、ちゃんとtheadとtbodyを付けてあげよう。ちなみにVuescrollを使わない場合のテーブルコンテンツスクロールもこれで対応できる。 ```html <table> <vur-scroll> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </tbody> </vur-scroll> </table> ```
2021/01/07 19:53:48

コメント (0)

あなたもコメントしてみませんか

アカウント新規作成(無料)

既にアカウントを持っている方は ログイン