深入探究iOS下fixed定位导致的问题

讨论背景

众所周知，fixed元素在IOS下的表现是糟糕的，fixed元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚（如：页面滚动，fixed元素与页面相互分离；页面滚动，fixed元素消失等）。这些表现过于离奇，显得没有逻辑，一时间很难找到对应的解决方案。
所以笔者决定从一个简单列表页出发，把遇到的各种奇怪问题都罗列出来，并探究其出现的原因。以便在开发中规避这些问题。

假定我们的需求是做一个列表页，列表页的顶部放置一些「其他」信息，底部放置一个「创建」按钮，中间显示「项目」列表内容。
设计稿大概是这样。

实现方案

根据需求，我们分别制作了三种解决方案。分别是

• 利用fixed定位，将「按钮」放在滚动区「项目列表」外面，解决方案示例1。
• 利用fixed定位，将「按钮」放在滚动区「项目列表」里面，解决方案示例2。
• 利用absolute定位，将「按钮」放在滚动区「项目列表」里面，并用「项目列表」去填充它所占的内容，解决方案示例3。

分别在PC和IOS浏览器中运行这几个demo，我们发现，这些demo在PC中的表现都是符合设计需求的。但在IOS浏览器中运行，就会各种出现各种的问题，分别对应这几个现象。

• 解决方案示例1：从「其他」内容区域开始触碰屏幕，进行页面滚动，「按钮」'脱离'页面内容区域。
  
• 解决方案示例2：从「其他」内容区域开始触碰屏幕，进行页面滚动，「按钮」消失了。
  
• 解决方案示例3：「其他」区域直接消失不见了。
  

要解释这几个现象，我们需要从颜色填充说起。

滚动填充的颜色

• 颜色填充示例1。

  • 重点代码：在这个示例里面，我们不对「项目列表」的高度进行限制，直接让内容在body中进行滚动。然后将body的背景颜色设置为橘红色。
  • 操作：进入页面后直接向上拉动页面，拉动到不可拖动为止。
  • 现象：我们发现「项目列表」的绿色区域下面，显示了body的背景颜色橘红色。
  • 说明：填充的颜色是可以定制的。
  • 疑问：这个颜色填充的区域会不会是body的延伸呢？