新規投稿
フォローする

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

 

モバイル詳細画面のヘッダー下側の空白部分にボタンを配置し
「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);
});
})();


 

0

4件のコメント

Avatar
HANSA

ichiro さん

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

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

0
Avatar
ichiro

HANSAさん

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

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

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

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

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

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

0
Avatar
HANSA

Ichiro さん

現象確認できました!

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

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

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

.gaia-mobile-viewcontroller {
  display: block
}

1
Avatar
ichiro

HANSAさん

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

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

・safariブラウザーでの動作

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

本当に助かりました。

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

0
サインインしてコメントを残してください。