如何阻止移动 Safari 将固定位置设置为绝对输入焦点？

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:relative 容器中使用 position:absolute ，该容器设置为该 position:relative 容器中视口的高度，您需要另一个使用 overflow-y:scroll 的 div 和 - webkit-overflow-scrolling : 触摸

警告：如果可能，我通常会避免在平板电脑和移动设备上使用固定位置，尽管有浏览器支持，但根据我的经验，它会很笨拙，而且 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