Question

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

给出最简单的固定侧边栏，例如：

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

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

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

所以问题..

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

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

Answer 1

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

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

警告：我通常会避免使用固定在平板电脑上的位置。如果可能的话，移动虽然浏览器支持在那里，但根据我的经验，它会很混乱，javascript解决方案还有很多不足之处，我的第一反应是与设计师一起挑战模式。如果我在有输入元素的情况下给出包含位置固定元素的设计，那么我更有可能寻求设计解决方案而不是开发设计解决方案，因为你所描述的焦点问题难以规避并保持高质量的用户体验。

THE MARKUP ：

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;
}

CSS ：

{{1}}

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

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

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

2 个答案: