web-dev-qa-db-ja.com

JQueryモバイルパネルをコンテンツとは別にスクロールする

JQueryMobileを使用してHTML5モバイルアプリに取り組んでいます。このデザインでは、メインコンテンツとは独立してスクロールできるサイドバーメニューが必要です。たとえば、ページのどこかをスクロールしてメニューを開き、ページコンテンツをスクロールせずにそのメニュー内をスクロールできます。

メニューを実装するには、JQueryMobileのスライドパネルが当然の選択でした。ただし、コンテンツとは別にスクロールさせることはできませんでした。

iScrollView プラグインの有無にかかわらずiScroll4を使用してJQueryMobileスライドパネルをスクロールしようとしましたが、スクロールはパネルでは機能せず、ページコンテンツの要素でのみ機能します。パネルの内容は押したり引いたりできますが、元の位置に戻ります（「ラバーバンド」効果）。

jScroll を使用してJQuery mobile（ ".ui-panel-inner"）によって作成されたdivをターゲットにしようとしましたが、同じ結果になりました。

パネルを表示した後にiScrollオブジェクトでrefresh()を呼び出すことも機能しませんでした。

これを機能させるために組み込みのJQueryMobileスライドパネルを使用することを忘れようとしています。コンテンツdivから独立してJQueryMobileパネルをスクロールするソリューションを知っている人はいますか？

jquery-mobileiscroll4
16
Kirkpatrick

これは私も夢中にさせていました。私は このフォーラムの応答 でソリューションを使用しました

JQueryMobileスタイルシートの後に次のCSSを追加します。

    .ui-panel.ui-panel-open {
        position:fixed;
    }
    .ui-panel-inner {
        position: absolute;
        top: 1px;
        left: 0;
        right: 0;
        bottom: 0px;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }
22
Alison
  .ui-panel.ui-panel-open {
    position:fixed;
}
.ui-panel-inner {
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

これは、AlisonTinkerが提供するソリューションです。スクロールするものがないときにスクロールが表示されないようにするには、を変更します。

overflow: scroll;

に

overflow: auto;
7
Diamond

私はあなたと同様のケースを持っています。左側のパネルに静的メニューが必要です。パネルをスクロールしたくありません。

次に、data-position-fixed="true"を使用します。

4
iqbal

パネルが開いているときにコンテンツを修正する必要があると思います

パネルが開いているかどうかを確認するには、このクラスをBODY.ui-panel.ui-panel-openに追加します。

位置を設定する必要があります：固定！重要; .ui-panel.ui-panel-openの下の.ui-panel-wrapperに

0
Mejri Yassine

内側のパネルに上記のスタイルシートを使用して、panelbeforeopen/panelbeforecloseでトリガーされる動的なcss設定を使用して私のソリューションを参照してください。

$(document).on("panelbeforeopen", "#panel", function () { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "hidden", "position": "fixed" }); }).on("panelbeforeclose", "#panel", function () { $(".ui-panel").css({ "overflow": "hidden" }); $(".ui-content").css({ "overflow": "scroll", "position": "absolute" }); });

http://jsfiddle.net/ohxdtwga/

スティックフッターの更新：

http://jsfiddle.net/u92m7u2n/

0
metamagikum