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

[kuru]

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

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

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

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

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

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

[Maple (もみじ)]

そのカスタマイズビューが、どんな内容なのか、こちらには分からないので
デフォルトのモバイル一覧画面で試しましたが、下記コードでできました。

スクロール可能な要素を取得するとき gaia-mobile-v2-viewpanel-contents を
指定しているのは、開発者ツールのElementsタブで
これを見たらscrollと書いてあったためです。

(() => {
    'use strict';

    // モバイルで一覧画面を表示したときの処理
    kintone.events.on("mobile.app.record.index.show", (event) => {
        // スクロール可能な要素を取得
        const scrollContainer = document.querySelector('.gaia-mobile-v2-viewpanel-contents');

        // スクロール可能な要素が見つかった場合
        if (scrollContainer) {
            // 一覧画面から詳細画面へ遷移するリンクをクリックしたらスクロール位置を取得
            document.querySelectorAll('.gaia-mobile-v2-app-index-recordlist-table a').forEach((link) => {
                link.addEventListener('click', () => {
                    const scrollPosition = scrollContainer.scrollTop;

                    // 取得したスクロール位置をセッションストレージに保存
                    sessionStorage.setItem('scrollPosition', scrollPosition);
                });
            });

        }

        return event;
    });

    // 詳細画面から一覧画面に戻る際のスクロール位置復元
    kintone.events.on("mobile.app.record.index.show", (event) => {
        const referrer = document.referrer; // リファラを取得

        // リファラが詳細画面を指している場合にスクロール位置を復元
        if (referrer && referrer.includes('/show')) {
            // 保存されたスクロール位置を取得
            const savedPosition = sessionStorage.getItem('scrollPosition');

            // スクロール位置が保存されていれば復元する
            if (savedPosition !== null) {
                const scrollContainer = document.querySelector('.gaia-mobile-v2-viewpanel-contents');
                
                // スクロール可能な要素が存在する場合にスクロール位置を復元
                if (scrollContainer) {
                    scrollContainer.scrollTop = parseInt(savedPosition, 10);
                }
            }
        }

        return event;
    });
})();

[kuru]

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

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

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

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

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

モバイル版アプリで 一覧画面の上部にカレンダーコンポーネントをいれる改修を行い カレンダーの下にkintone標準の一覧が表示されるようになっています。   現在、一覧から、あるレコードを選び参照画面に遷移した後に戻った場合、 画面の表示位置が上部となり、一覧のレコードを参照するには 下にスクロールが必要となります。 一覧から順番にレコードを開いてチェックしていく運用では 使いづら…

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);

[kuru]

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

というわけで改良版です。
ページが変わったときに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);