青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

scrollboosterでドラッグで横スクロールする機能を実装。IE11にも対応。

一番ありそうな場面は、

テーブルで、左列がstickyで固定されていて、2列目以降がスクロール出来るやつ。縦に長いテーブルだと横スクロール出来る入力デバイスを持っていないとスクロールバーをクリックしないとスクロール出来ないので操作がかなりめんどくさい。

なので、加えてドラッグで横スクロール出来る機能も実装する。


jQueryでどうにかする、みたいなのも出てくるけど、普通に良い感じのライブラリがあった。

bl6.jp

www.npmjs.com

ilyashubin.github.io

github.com

そして、TypeScriptなら型定義ファイルも

www.npmjs.com

overflow: scrollを設定してある箇所がviewport、スクロールさせたい中身をcontentに設定し、scrollModeやdirectionを設定するとドラッグで横スクロール出来ます。

このライブラリには含まれないですが、ドラッグで横スクロール出来るところは公式サイトのように、cursor: move;を設定するとよりよいです


【追記】 そして、IE11対応。このライブラリ、そのままではIE11対応していません。アロー関数を含んでいるらしくエラーが出ます。webpack使っているならbabel-loaderとか通してコンパイルする必要あります。カルーセルのライブラリのSwiperとかも同じく通す必要ありますよね。Swiperも一緒にbabel-loaderを通すの以下のような感じになります。

Webpackの書き方 test:で対象を指定できます

ics.media

{
  test: /\/node_modules\/(swiper|dom7|scrollbooster)\/.+\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }]],
    },
  },
},