Zenn
🔩

Salesforce Mobile App で position: fixed が機能しない時の対処法

2022/12/22に公開
CSS
Salesforce
LWC
tech

はじめに

Salesforceで管理画面を開発する際はLightning Web Component（以降LWC）を使って開発することがあります。中には開発した管理画面をSalesforce Mobile Appで使うなんてこともあるかと思います。

ただこのMobileではブラウザでは考慮しなくても良いようなところを考慮する必要がある時があります。そのうちの1つがCSSのposition: fixedです。実はこれ、ベンダープレフィックスを使用しても解決することができません。

そこで今回はfixedを使いたい時の回避策をご紹介いたします。

回避策

下記のような構成でclass="fixed_target"にposition: fixedを当てることを想定します。

<div class="parent">
  <div class="fixed_target"></div>
</div>

fixed_targetの内容

fixedさせたいものについては通常通りの書き方で問題ありません。

.fixed_target{
  position: fixed;
  right: 24px;
  bottom: 24px;
}

parentの内容

fixedさせたいものの親要素の設定が重要になります。

.parent{
  height: 100vh;
  overflow: scroll;
}

指定すべきCSSはこれだけです。
詳しくはわかりませんが、このプロパティを付与しないと親要素のコンテンツが画面外に及ぶ場合にスクロールしたときに元々いた位置を追従してしまいます。

そこで親要素の高さを見える範囲である　１００vhにすることで親要素が画面外にいくことを防ぎます。そしてオーバーするコンテンツについてはoverflow: scrollにすることで通常通りのスクロールしている感覚にすることができるということになります。

まとめ

以上がSalesforce Mobile Appで開発しているLWCにてfixedを使う時の回避策になります。

こうした意外な落とし穴があるので、Salesforce Mobile App関連の開発はブラウザのウィンドウ幅をモバイルにしたものではなく、シミュレーターを使ってやるべきだとつくづく感じました...

シミュレータの使い方の記事は次回書こうと思います。

最後まで読んでいただきありがとうございました！

Discussion