Question

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

该应用包含固定页脚和滚动内容区域。该应用程序在除iPhone X之外的所有设备上都能正常工作。在iPhone X上滚动内容区域时，页脚实际上会滚出视图。

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

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

我已经将iPhone X优化应用于缺口，并且在设计中运行良好。剩下的唯一问题是滚动问题。

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

有关为什么页脚可能会在iPhone X上向下滚动的任何想法？

Answer 1

您可以尝试将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;（网络明星）（Haven＆＃39; t在#not-scrollable的css中尝试了它，它不应该滚动。尝试一下。

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

注意：我只是以div为例。你可以用任何你想要的方式使用它

新增功能：如果正文是你的滚动，请在body标签内添加一个div，但在声明body标签后立即将滚动作为div。

有很多网站向您展示如何将网页引入iPhone X. Here's其中一个网站。

Answer 2

我在之前的网络项目中使用了position:sticky;。结果证明它适用于大多数情况。 Can you use position sticky?

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

如果这个简单的修复不起作用，我会从@RandomChannel那里找到答案。

Answer 3

 <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 4

提出用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 5

不要在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;
}

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

5 个答案: