如何阻止手机游戏设置从输入焦点的固定位置设置为绝对位置？

Question

免责声明 - 我理解在safari中存在固定元素的问题,并且不支持固定元素,但现在等等.但是,我无法找到解决这个问题的问题.

鉴于最简单的固定侧边栏,例如:

.sidebar {
    position: fixed;
    top: 10px;
    right: 10px;
}

和一个相对较长的页面,带有输入元素.

当一个输入元素被聚焦时,任何固定的元素都变成绝对的 - 我理解为什么,safari试图对视口进行整理 - 这很好,但并不总是合适的.我要求我为用户选择最好的体验(我最清楚自然).

所以问题..

即使输入元素被聚焦,有没有办法将固定元素保留为固定元素？

我试图$(window).on('scroll',在滚动时手动做一些魔法和位置元素,但它在ipad上非常紧张.

Answer 1

Safari 至少从 9.2 版本开始支持position:fixed，但如果您遇到困难的问题，您可以通过使文档元素和正文全屏然后使用绝对定位来完全创建固定位置效果。然后滚动发生在一些主容器元素而不是主体中。使用此方法，您的“固定”元素可以存在于标记中的任何位置。

jsfiddle在这里

html,
body,
.mainContainer {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.mainContainer {
  overflow: auto;
}

.fixed {
  position: absolute;
  bottom: 20px;
  left: 20px;
}