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

Question

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

鉴于最简单的固定侧边栏，例如：

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

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

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

所以问题..

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

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

Answer 1

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

jsfiddle here

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

.mainContainer {
  overflow: auto;
}

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

Answer 2

为了达到您想要的效果，您需要更改布局方法。而不是使用position：fixed定位侧边栏你需要在一个位置使用position：absolute：相对容器设置为该位置内视口的高度：相对容器你需要另一个使用overflow-y的div：scroll和 - webkit-overflow-scrolling：touch

警告：我通常避免使用固定在平板电脑和移动设备上的位置，尽管浏览器支持在那里，根据我的经验，这将是janky和javascript解决方案留下很多不足之处，我的第一反应是挑战模式与设计师。如果我在输入元素时给出包含位置固定元素的设计，我更倾向于寻求设计解决方案而不是开发设计解决方案，因为您所描述的焦点问题难以规避并保持高质量的用户体验。

标记：

<div class="outer">
   <div class="sidebar">
    <ul>
       <li>Dummy list nav or something</li>

     </ul>
  </div>
  <div class="container">
       <input type="text" />
  <!-- I added 10000 inputs here as a demo -->
 </div>
</div>

CSS：

html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
.outer {
  position: relative;
  overflow: hidden;

/* I'm using Viewport Units here for ease, but I would more likely check the height of the viewport with javascript as it has better support*/
  height: 100vh;
}
.sidebar {
    position: absolute;
    top: 10px;
    right: 10px;
  /*added bg colour for demo */

  background: blue;
}
.container {
  height: 100vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch
}
input {
  display: block;
}

这是一个CodePen供您在模拟器中打开（演示文稿视图）：https://codepen.io/NeilWkz/full/WxqqXj/

这是代码的编辑器视图：https://codepen.io/NeilWkz/pen/WxqqXj