OverlayScrollbarsが高性能でスクロールバーをカスタマイズできるという噂を聞いたので触ってみた話
simplebarのgithubを見ていたら色々出てくるデメリットを解決するなら『OverlayScrollbars』を使ったらいいよと紹介されていたので気になって触ってみることにしました。
『OverlayScrollbars』は機能的に優れていてオプションも充実、simplebarで生じたデメリットをうけません
簡易的にですがパフォーマンスを比べてみるとただ使うだけのテストでは大差ないようなのでやりたいことに合わせて選ぶといいかもしれません
パッと見慣れていない人だと使いにくそうな感じでgoogle先生に聞いてみても1ページ目に日本語で紹介している記事が一つしか無いので布教活動のために記事を書き始めました
OverlayScrollbarsの使い方
simplebarと同じようにbody要素に対して使うことを想定して使い方を紹介していきます
とりあえず世界で一番詳しく解説されているのはgithubだと思うので参照しつつ調整してみてください
OverlayScrollbarsで使うための準備
githubの方にDL用のリンクとCDNが用意されています。
今回はCDNを使ってみたいと思うんですが記事を書いている現在最新版のバージョンは2.2.0を使っていきます
CDNのリンクがわかりにくいかもしれないので一応ライブラリを読み込むためのコードを紹介しておきます。
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.2.0/styles/overlayscrollbars.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.2.0/browser/overlayscrollbars.browser.es6.min.js"></script> |
上記コードはhead要素で読み込むように配置してください
更にグローバル変数OverlayScrollbarsGlobalを使用してapiにアクセスできるようにしておきます
|
1 2 3 4 5 6 |
var { OverlayScrollbars, ScrollbarsHidingPlugin, //プラグイン SizeObserverPlugin, //プラグイン ClickScrollPlugin //プラグイン } = OverlayScrollbarsGlobal; |
プラグインを使う時の書式は以下の通りで、複数の場合は配列にして指定します
|
1 2 3 4 5 |
// 一つだけ使う場合 OverlayScrollbars.plugin(ScrollbarsHidingPlugin); // 複数使う場合 OverlayScrollbars.plugin([SizeObserverPlugin, ClickScrollPlugin]); |
OverlayScrollbarsのイニシャライズ
私はbodyの閉じタグ直前にscript要素を作って記述して使っていますがhead要素内でも然るべきコードと組み合わせれば使えると思います
以下のコードでとりあえず動きます
|
1 |
const osInstance = OverlayScrollbars(document.querySelector('body'), {}); |
イニシャライズ時のチラツキ防止
OverlayScrollbarsをイニシャライズしようとすると、すべての要素を作成してDOMに追加する仕様のために数ミリ秒の時間が必要になるそうです。
この間、デフォルトのスクロールバーが表示されたままになり、イニシャライズが終了するとデフォルトのスクロールバーから切り替わるのですが、チラつきのような見え方をします
このチラつきはOverlayScrollbarsを使う対象要素（対象要素がbodyの場合はhtml要素）にdata-overlayscrollbars-initialize属性を付与することによって回避できるようですが、公式サイトではbody要素にも付与していたのでここでもそのようなコードで紹介しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja" data-overlayscrollbars-initialize> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>scrollbar </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.2.0/styles/overlayscrollbars.min.css"> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/2.2.0/browser/overlayscrollbars.browser.es6.min.js"></script> <script> let { OverlayScrollbars, ScrollbarsHidingPlugin, SizeObserverPlugin, ClickScrollPlugin } = OverlayScrollbarsGlobal; </script> </head> <body data-overlayscrollbars-initialize> |
OverlayScrollbarsのオプション
OverlayScrollbarsは大きく分けると5種類のオプションがあり、optionsメソッドでいつでも変更することができるそうです
まずはオプションの書き方をデフォルト値を使って紹介しておきますのでオプションを使うときの参考にしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
const osInstance = OverlayScrollbars(document.querySelector('body'), { //以下オプションはすべてデフォルト値 paddingAbsolute: false, showNativeOverlaidScrollbars: false, update: { elementEvents: [ ['img', 'load'] ], debounce: [0, 33], attributes: null, ignoreMutation: null, }, overflow: { x: 'scroll', y: 'scroll', }, scrollbars: { theme: 'os-theme-dark', visibility: 'auto', autoHide: 'never', autoHideDelay: 1300, dragScroll: true, clickScroll: false, pointers: ['mouse', 'touch', 'pen'], }, }); |
paddingAbsolute
| type | default |
|---|---|
| boolean | false |
コンテンツのpaddingを絶対化するか否かを示す。と説明されているオプションです
showNativeOverlaidScrollbars
| type | default |
|---|---|
| boolean | false |
ネイティブのオーバーレイスクロールバーを表示するかどうかを示す。と説明されているオプションです
デフォルトの状態だとiosでスクロールバーが二重に表示されますがtrueにすると一つになります
update.elementEvents
| type | default |
|---|---|
| Array<[string, string]> | null | [[‘img’, ‘load’]] |
タプルの配列です。タプルの最初の値はセレクタで、2番目の値はイベント名です。指定されたセレクタを持つ要素のいずれかが指定されたイベントを発する場合、プラグインはそれ自体を更新します。
デフォルト値の[[‘img’, ‘load’]]はimg要素がloadイベントを発した場合、プラグインはそれ自体を更新すると解釈できる。
update.debounce
| type | default |
|---|---|
| [number, number] | number | null | [0, 33] |
コンテンツの変更を追跡するMutationObserverをデバウンスする。タプルが渡された場合、最初の値はタイムアウト、2番目は最大待機時間です。
update.attributes
| type | default |
|---|---|
| string[] | null | null |
このオプションがNULLの場合でも、MutationObserverが常に観察する属性の基本配列があります。
MutationObserverがコンテンツに対して観察すべき追加属性の配列。
ということなんでDOMの変更を監視する要素を配列で指定する感じだと思われるんですけどまだ実験してないす
update.ignoreMutation
| type | default |
|---|---|
| ((mutation) => any) | null | null |
MutationRecordを引数として受け取る関数です。
この関数が真理値を返した場合、変異は無視され、プラグインは更新されない。パフォーマンスを微調整するのに便利です。
overflow.x
| type | default |
|---|---|
| string | ‘scroll’ |
X軸のオーバーフロー時の動作を指定するオプションです
使える値はデフォルトのscrollとhidden、visible、visible-hidden、visible-scroll
overflow.y
| type | default |
|---|---|
| string | ‘scroll’ |
Y軸のオーバーフロー時の動作を指定するオプションです
使える値はデフォルトのscrollとhidden、visible、visible-hidden、visible-scroll
scrollbars.theme
| type | default |
|---|---|
| string | null | ‘os-theme-dark’ |
スクロールバーに付与するclassを指定する。
scrollbars.visibility
| type | default |
|---|---|
| string | ‘auto’ |
スクロールバーの基本的な見え方を指定するオプション
使える値はデフォルトのautoとvisible、hidden
scrollbars.autoHide
ユーザーが特定の操作をした後に、表示されているスクロールバーを自動的に非表示にすることができます。
使える値は表示したままにするデフォルトのneverとスクロールしたあとに消えるようにするscroll、表示領域からマウスカーソルが外れたあとに消えるようにするleave、マウス動いていないときに消えるようにするmoveがあります
scrollbars.autoHideDelay
| type | default |
|---|---|
| number | 1300 |
スクロールバーが自動的に隠されるまでの遅延時間をミリ秒単位で指定します。
scrollbars.dragScroll
| type | default |
|---|---|
| boolean | true |
スクロールバーのツマミ部分をドラッグしてスクロールさせることができるかどうかを示すオプション
scrollbars.clickScroll
| type | default |
|---|---|
| boolean | false |
スクロールバー・トラックをクリックしてスクロールさせることができるかどうかを示すオプション
このオプションを使用するには、ClickScrollPluginが必要です
scrollbars.pointers
| type | default |
|---|---|
| string[] | null | [‘mouse’, ‘touch’, ‘pen’] |
プラグインが反応すべきPointerTypesを指定する。
ここまでである程度使える形にカスタマイズできます
例えば普段使っているスクロールバーの機能と同じようにするのであれば以下のようなオプションを設定します
|
1 2 3 4 5 6 7 |
OverlayScrollbars.plugin(ClickScrollPlugin); const osInstance = OverlayScrollbars(document.querySelector('body'), { showNativeOverlaidScrollbars: true, scrollbars: { clickScroll: true, }, }); |
OverlayScrollbarsのイベント
すべてのイベントは、それが呼び出されたインスタンスを常に第1引数として受け取る形で書いていきます。
|
1 2 3 4 5 6 7 8 |
const osInstance = OverlayScrollbars(document.querySelector('body'), { オプション:値, オプション:値 }, { イベント(osInstance) { 処理 } }); |
initialized
| 引数 | 説明 |
|---|---|
| instance | イベントを呼び出したインスタンス |
生成されたすべての要素、オブザーバ、イベントがDOMに追加された後に起動されるイベント
updated
| 引数 | 説明 |
|---|---|
| instance | イベントを呼び出したインスタンス |
| onUpdatedArgs | アップデートの詳細を記述したオブジェクト |
インスタンスが更新された後に起動されますが、更新が行われたが何も変化がない場合、イベントは起動されない。
destroyed
| 引数 | 説明 |
|---|---|
| instance | イベントを呼び出したインスタンス |
| canceled | 初期化がキャンセルされて破棄されたかどうかを示すブール値。 |
生成されたすべての要素、オブザーバー、イベントが DOM から削除された後に呼び出されます
scroll
| 引数 | 説明 |
|---|---|
| instance | イベントを呼び出したインスタンス |
| event | DOMイベントの元となるイベント引数 |
ビューポートをスクロールさせることで呼び出されます
