スクロールバーのカスタマイズはプラグインに頼らずjQueryで自作

目的はたった一つ。
ブラウザ標準のスクロールバーのデザインをカスタマイズすることです。

つまり、

• マウススクロールにより、コンテンツがスムーズに移動
• スクロールバーのトグルをドラッグアンドドロップでコンテンツが移動
• 他ファンクションとの兼ね合いでjQueryプラグインであること
• クリック等の個別ファンクションで任意の座標に移動
• ファイル容量が軽量
• レスポンシブに対応
• 以上が縦スクロール、横スクロールに対応

を要望しています。普通のスクロールバーとしての機能です。

そこで、多くのスクロールバーのプラグインを検証しましたが、全ての要望を叶えるプラグインはありませんでした。
これ、本当に。

横スクロールに対応していなかったり、画面サイズを変更するとバグが発生したり、座標移動が面倒だったり、容量が重すぎたりと。

そのため、最終的には自分で作成することにしました。

参考にしたサイトはこちら。

CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする | SPYWEB https://spyweb.media/2017/09/15/hide-and-custom-scrollbar-design/

とてもシンプルなコードでこちらの要望が実装されています。
こちらは縦スクロールについてのコードのみなので、横スクロールも上記コードを参考に実装可能です。

何故他のプラグインはこれが出来ないのだろうかと不思議でなりません。