とりあえず書きなぐる

とりあえず、マイノリティーなプログラムを極力説明せずに書きなぐります

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となっていますが、設定しないと駄目みたいです