PerfectなScrollbar
スクロールバープラグインです
http://utatti.github.io/perfect-scrollbar/
最新は1.4.0
d.tsも公式で用意されていますが、TypeScript2以降用のようなのでエラーになる定義はコメントアウトか型をanyにします
最初の頃はJqueyプラグインだったと記憶していますが、現在はJqueyフリーになっています
パネルの内側のスクロールに使ってみます
スクロール対象のboxをposition:relativeにしなくてならないようです
あとバーが背面に回る場合がありますので矯正
/Scr/cm.css
/* Panel */ div.ui-panel > .ui-panel-inner { /* Fro PerfectScrollbar */ position: relative; } /* PerfectScrollbar */ div.ps__rail-x, div.ps__rail-y { z-index: 1; }
CDNは無いようです
/Views/Mobile/Index.vbhtml
<link rel="stylesheet" href="@Url.Content("~/Content/perfect-scrollbar.css")" /> <script type="text/javascript" src="@Url.Content("~/Scripts/perfect-scrollbar.min.js")"></script>
パネルは左右ともdata-position-fixed="true"で固定にします
オブジェクトを作成して、適時updateを実行する必要があります
/Src/mobile.ts
/// <reference path="../scripts/typings/perfect-scrollbar/perfect-scrollbar.d.ts"/> namespace Page1 { let _panelLeft: JQuery; let _panelRight: JQuery; let _psLeft: PerfectScrollbar; let _psRight: PerfectScrollbar; $(document).on("pagecontainershow", function (event: Event, ui: any) { if (cm.getActivePageId() !== "page1") { return; } // サイドパネル _panelLeft = $("#menu-left"); _panelRight = $("#menu-right"); // スクロールバー _psLeft = new PerfectScrollbar(_panelLeft.children(".ui-panel-inner")[0]); _psRight = new PerfectScrollbar(_panelRight.children(".ui-panel-inner")[0]); $(window).resize(); mq.update(); }); $(window).on("resize", function (event: Event) { if (cm.getActivePageId() !== "page1") { return; } // サイドパネルの高さ更新 let h = $(window).outerHeight(); Panel.setFixedHeight(_panelLeft, h); if (_psLeft) { _psLeft.update(); } Panel.setFixedHeight(_panelRight, h); if (_psRight) { _psRight.update(); } });
変更点抜粋です
これで表示幅の変更なしに左右のパネルに必要に応じてスクロールバーが付きます
ただしパネル内で使用する場合はマウスホイールでのスクロール時にページのスクロールバーが引っ張られることがあります
オプションのwheelPropagationをfalseに指定して下さい
ドキュメントではデフォルトfalseとなっていますが、設定しないと駄目みたいです