モバイル詳細画面のヘッダー部に配置したボタンの固定について

kintone カスタマイズ
1

 

モバイル詳細画面のヘッダー下側の空白部分にボタンを配置し
「position: sticky」にてボタンのスクロールを制御しようと
しましたが、Android端末とiOS端末では動作に差異があります。

< Android端末 >
・画面スクロールに同期してボタンも一定量スクロールした後
固定される。
・以降スクロールしてもページの最後までボタンは固定される。

< iPad/iPhone端末 >
・画面スクロールに同期してボタンも一定量スクロール後、
固定される。
・以降スクロールでページの途中までボタンが固定されるが、
さらにスクロールするとボタンの固定が解除される。

できればAndroid端末の動作に合わせたいのですが、ご教示頂ければ

幸いです。

 

＜サンプルコード＞

(function() {
‘use strict’;
kintone.events.on(‘mobile.app.record.detail.show’, function(event) {
var mySpaceFieldButton = document.createElement(‘button’);
mySpaceFieldButton.id = ‘my_space_field_button’;
mySpaceFieldButton.innerText = ’ BUTTON ';

kintone.mobile.app.getHeaderSpaceElement().style.position = “sticky”;
kintone.mobile.app.getHeaderSpaceElement().style.position = “-webkit-sticky”;
kintone.mobile.app.getHeaderSpaceElement().style.zIndex = 100;
kintone.mobile.app.getHeaderSpaceElement().style.top = “10px”;

kintone.mobile.app.getHeaderSpaceElement().appendChild(mySpaceFieldButton);
});
})();

 

2

ichiro さん

chrome ブラウザで試したのですが、再現できず。。

遭遇した環境を詳細に教えていただけないでしょうか。

3

HANSAさん

試行頂きありがとうございました。

評価環境をお知らせ致します。

  1. 評価用アプリの環境
    添付のサンプルJavaScriptを「スマートフォン用のJavaScriptファイル」に登録

  2. 評価端末環境
    １）Kintoneモバイル用アプリのバージョンは「iOS:2.81 Android:2.7」です。

２）Webブラウザでのバージョンは以下となります。
（１）Chromeブラウザ（バージョン: 80.0.3987.132）（モバイル版に切り替え）
→ Android端末と同等（ボタンが最後まで固定される）
（２）Safariブラウザ（バージョン13.0.5 (13608.5.12)）（モバイル版に切り替え）
→ iPhone/iPadと同等（ボタンの固定は途中で解除される）

お手数をおかけし恐縮ですが宜しくお願いします。

4

Ichiro さん

現象確認できました！

safari だと 以下のように制限があるようです。

https://ecmemo.net/safari-sticky-problem

一応以下の css で対処できるようでした。

.gaia-mobile-viewcontroller {
  display: block
}

5

HANSAさん

色々とお手数おかけしました。

ご教示頂いた方法で解決できる事を確認しました。

・safariブラウザーでの動作

・ios端末（iphone/ipad)のkintoneアプリでの動作

本当に助かりました。

ありがとうございました。