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

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;(或者)(我还没有尝试过)或者device-fixed;(网络明星)(还没有尝试过)在css中#not-scrollable,它不应该滚动.试试看.

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

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

新增:如果正文是你的滚动,在body标签内添加一个div,但是在声明body标签之后,滚动就是div.

有很多网站向您展示如何将网页采用到iPhone X. 这是其中之一.

Answer 2

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