モバイルカスタマイズビューで一覧画面のスクロール位置を画面遷移前の状態に戻したい

kintone カスタマイズ
1

モバイルカスタマイズビューを作って実装しているのですが、あるレコードを選んで詳細画面に遷移した後戻ってきたら、遷移前のスクロール位置になるようにしたいです。
レコードを次々に確認しやすくなるためのカスタマイズです。

試行錯誤中ですが、私自身のJavaScriptスキルもあまり高くないので難航しています。
アドバイスをいただけましたら、幸いです。

過去のトピックを探したところ、下記を見つけ試してみたのですが
strTopの値がどれだけスクロールしても常に0でうまく動きません。
CSSを探しても.gaia-mobile-viewcontrollerは見当たらなかったので、
$('.gaia-mobile-viewcontroller').scrollTop()が効いていないのではないかと思っています。

モバイル版アプリで一覧画面のスクロール位置を画面遷移前の状態に戻したい

その他、下記のようなスクロール位置を取得したり、移動させる記述を試しましたが効いていません。
window.scrollY
window.scrollBy(0,600)
window.scrollTo(0,200)

このことからkintoneのスクロールは疑似スクロールのようなものなのではないかと思うのですが、
実際どの要素がそれを担っているのかは特定できていません。

3

@Maple 返信ありがとうございます。
もみじさんのコードで、デフォルトのモバイル一覧画面で実装できることが確認できました。

ただ、書いていただいた通り
私のカスタマイズビューでは状況が違ったので、諸々書き換えて最終的にやりたいことができるようになりました。
本当に助かりました！

デフォルトのモバイル一覧画面と違ったところ
・.gaia-mobile-v2-app-index-recordlist-table aが無かった
・画面描画処理が終わってからスクロール位置を再現する必要があった

大元の投稿のコードを今動く形にするとこうなるかと思います。
（私が最終的に書いたものも、下記を他のjsと組み合わせて順番変えた感じです）

jQuery.noConflict();
(function ($) {
    "use strict";
    kintone.events.on("mobile.app.record.index.show", function (event) {

        // sessionStorage用にキーの値を作成
        var skey = 'mobile-top-' + event.appId;
        // sessionStorageのキーに対応する値を取得
        var strTop = window.sessionStorage.getItem(skey);

        // strTopに値があれば
        if (strTop) {
            // sessionStoragに保存したページ移動前のスクロール位置を再現
            $('.gaia-mobile-v2-viewpanel-contents').scrollTop(strTop);
        }

        // ページ移動前に、現在のスクロール位置をsessionStorageに保存
        $(window).on('beforeunload', function (ev) {
            var top = $('.gaia-mobile-v2-viewpanel-contents').scrollTop();
            window.sessionStorage.setItem(skey, top);
            console.log('top:' + top)
        });

        return event;
    });
})(jQuery);
4

あの後、気づきました。
ページが変わっても、記憶したスクロール位置を再現してしまうことに…。

というわけで改良版です。
ページが変わったときにURLの末尾が#offset=50や#offset=100など変わるので、
その値をページ移動前に覚えさせておいて、同一ページならスクロール位置を移動させる。
そうでないなら、スクロール位置は移動させない仕様にしました。

(function ($) {
    "use strict";
    kintone.events.on("mobile.app.record.index.show", function (event) {

        // sessionStorage用にキーの値を作成
        var skey = 'mobile-top-' + event.appId;
        // sessionStorageのキーに対応する値を取得
        var strTop = window.sessionStorage.getItem(skey);

        // 現在のURLのハッシュ部分を取得
        var hashAfter = window.location.hash;
        console.log('hashAfter:', hashAfter);
        var hashBefore = window.sessionStorage.getItem('hashBefore')

        // sessionStorageに保存したhashBeforeとhashAfterを比較
        // もし同じ値の場合（同じページの場合）
        if (hashBefore == hashAfter) {

            // strTopに値があれば
            if (strTop) {
                //スクロール位置をstrTopに合わせる
                $('.gaia-mobile-v2-viewpanel-contents').scrollTop(strTop);
            }
        }

        // ページ移動（詳細画面など）前に、現在のスクロール位置とハッシュ部分をsessionStorageに保存
        $(window).on('beforeunload', function (ev) {
            var top = $('.gaia-mobile-v2-viewpanel-contents').scrollTop();
            window.sessionStorage.setItem(skey, top);
            console.log('top:' + top)

            // 現在のURLのハッシュ部分を取得
            hashBefore = window.location.hash;
            // sessionStorageにhashBeforeの値を保存
            window.sessionStorage.setItem('hashBefore', hashBefore);
            console.log('hashBefore:', hashBefore);
        });

        return event;
    });
})(jQuery);
「いいね！」 2
5

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。