问题描述

在开发移动端H5页面时遇到这样的问题：但我通过css中position: fixed实现按钮悬浮效果时，在Android端中一切如预期一样，但是ios端却出现按钮跟着滑动方向移动，导致按钮看不见。这里小编猜测是由于ios浏览器内核某些版本对H5中某些属性存在兼容性问题。

解决方案

只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;（具体尺寸自己定）就可以实现效果
其思路是让顶部和底部固定不动的DIV和中间内容部分的DIV脱离开的方法就是让中间部分超出内容出现滚动条。

示例

悬浮不动部分

.pop-title-special {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  background: #F9F9F9;
  z-index: 100;
  border-radius: 18px;
  img {
    width: 12px;
    height: 12px;
    padding: 17px;
  }
}

主体内容部分

.contain {
  width: 88%;
  margin-left: 6%;
  margin-right: 6%;
  position:fixed;
  top:50px; 
  bottom:20px;
  overflow-y:scroll;
  overflow-x: hidden;
}