iPhone X 中的固定位置页脚滚动

Question

我有一个使用 Trigger.io 框架创建的混合 HTML5 应用程序。

该应用程序包含一个固定的页脚和一个滚动的内容区域。该应用程序在除 iPhone X 之外的所有设备上都能正常运行。在 iPhone X 上，当我滚动内容区域时，页脚实际上会滚动出一点。

这是当页脚在视图中时应用程序的外观

但是一旦我向下滚动，页脚就会隐藏，只有在我再次向上滚动时才会显示。

我已经针对刘海应用了 iPhone X 优化，并且在设计中效果很好。唯一剩下的问题是滚动问题。

由于我使用的是混合框架，因此视图是用 HTML + CSS 构建的，而不是原生 UI 组件。

对于为什么 iPhone X 上的页脚可能会向下滚动有什么想法吗？

Answer 1

提出一个用 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()

Answer 2

不要在 CSS 中使用fixed 位置。试试translateZ() CSS 函数，它可以在 3D 空间中沿 z 轴重新定位元素，即靠近或远离观察者。其结果是 <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;
}

Answer 3

您可以尝试将 div 放在可滚动部分之外，并固定位置。所以如果你有一个滚动的代码，

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

这样div滚动容器中的任何元素，它都会滚动。

如果你把它放在可滚动部分之外，

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

并将position:fixed; 或position:absolute; 或position: sticky;(Brainfeeder)（我还没有尝试过）或device-fixed;(web-stars)（也没有尝试过）放在css 中#not-scrollable，它不应该滚动。试试看。

当然，这不会使其相对于滚动容器，它会使其相对于它所在的任何容器，在这种情况下，它是 body 标签。

注意：我只是以 div 为例。你可以随心所欲地使用它

新：如果 body 是您的滚动条，请在 body 标记内添加一个 div，但在您声明 body 标记之后，以便滚动条是 div。

有很多网站向您展示如何将网页应用到 iPhone X。Here's 其中之一。

Answer 4

 <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%; 
}

Answer 5

我在之前的网络项目中使用过position:sticky;。事实证明它在大多数情况下都有效。 Can you use position sticky?

要尝试的另一件事（我必须为 FireFox 和 iOS Safari 执行此操作以修复一些错误）是将整个内容包装在 <div> 中，包括固定元素（页眉/页脚，...）结果它们相对于它们的父级是固定/粘性的，一旦父级结束，固定和/或粘性破坏导致各种错误。

如果这个简单的修复不起作用，我会从@RandomChannel 寻求答案。