web-dev-qa-db-ja.com

iPhone Xの固定位置フッタースクロール

Trigger.ioフレームワークを使用して作成されたハイブリッドHTML5アプリがあります。

アプリには、固定フッターとスクロールコンテンツ領域が含まれています。アプリは、iPhone Xを除くすべてのデバイスで正常に動作します。iPhoneXでコンテンツ領域をスクロールすると、実際にはフッターが少し見えなくなります。

これは、フッターが表示されているときのアプリの外観です

Normal app view

しかし、下にスクロールすると、フッターが非表示になり、もう一度上にスクロールしたときにのみ表示されます。

Scrolled app view

私はノッチにiPhone X最適化を適用しましたが、それはデザインでうまく機能します。残っている唯一の問題は、スクロールの問題です。

私はハイブリッドフレームワークを使用しているため、ビューはHTML + CSSで構築され、ネイティブUIコンポーネントでは構築されません。

IPhone Xでフッターが下にスクロールされる理由について何か考えはありますか？

htmlioscssiphonetrigger.io
9
JohnP

スクロール可能なパーツの外側にdivを配置して、位置を固定してみることができます。したがって、スクロールするコードがある場合、

<div id="scroll-container">
  <div id="scrollable">
  </div>
<div>

Div scroll-container内の要素がある場合、スクロールします。

スクロール可能な部分の外側に配置すると、

<div id="scroll-container">
<div>
<div id="not-scrollable">
</div>

position:fixed;またはposition:absolute;またはposition: sticky;（Brainfeeder）（まだ試していません）またはdevice-fixed;（web-stars）（これも試したことはありません） ）#not-scrollableのCSSで、スクロールしないでください。やってみよう。

もちろん、これはスクロールするコンテナに相対的ではなく、それが含まれているどのコンテナにも相対的になります。この場合、それはbodyタグです。

注：例としてdivを使用しています。これは好きなように使えます

新規：本体がスクロールである場合は、bodyタグ内にdivを追加しますが、bodyタグを宣言した直後に、スクロールがdivになります。

IPhone XにWebページを採用する方法を示すサイトがたくさんあります。 ここに そのうちの1つ。

8
Random Channel
 <div class="main_div">
    <div class="scrollble">
    // scrollable content
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    some text goes heresome text goes here
    </div>
    <div class="footer">
    // fixed footer
    </div>
</div>

// CSS

.main_div {
 height: 100vh;
 position: fixed;
 }
.scrollble {
 height: 95vh;
 overflow-y:auto; 
 border: 1px solid #000;
}
.footer {
 height: 5vh; 
position: fixed; 
width: 100%; 
}
3
vinaykumar0459

position:sticky;以前のWebプロジェクト。ほとんどの場合に機能することがわかりました。 ポジションスティッキを使用できますか？

もう1つ試すこと（FireFoxとiOS Safariでいくつかのバグを修正するためにこれを行わなければなりませんでした）は、コンテンツ全体を<div>、修正された要素（ヘッダー/フッターなど）を含みます。親が終了すると、修正または粘着性があり、親が終了すると、修正および/または粘着性が壊れ、さまざまなバグが発生します。

この単純な修正が機能しない場合は、@ RandomChannelからの回答を探します。

3
Brainfeeder

JQueryで修正するアイデアを提案する

CSS

body
  margin: 0

#WhatEverClassOrIdYouGaveIt
  height: 10em // or whatever size u want
  width: 100%
  //background-color: red
  position: absolute // or fixed

JQuery

resize = () => {
  var o = $(document)
  dW = o.width() //Not needed
  dH = o.height()
  $("#WhatEverClassOrIdYouGaveIt").css({
    top: dH - $("#WhatEverClassOrIdYouGaveIt").height()
  })
}

$(window).resize(() => {
  resize()
})

resize()
2
SithLee

CSSではfixedの位置を使用しないでください。 3D空間のz軸に沿って要素を再配置するtranslateZ() CSS関数を試してください。つまり、ビューアに近い、またはビューアから離れています。その結果は<transform-function> データ・タイプ。

HTMLコードは次のとおりです。

<div>Static</div>
<div class="moved">Moved</div>

CSSコードは次のとおりです。

div {
  position: relative;
  width: 100px;
  height: 1000px;
  left: 200px;
  background-color: black;
}
.moved {
  transform: perspective(400px) translateZ(180px);
  background-color: red;
}
0
ARGeo