# 苹果手机兼容fixed

**Repository Path**: battleforg/appleFix

## Basic Information

- **Project Name**: 苹果手机兼容fixed
- **Description**: 苹果手机实现fixed的效果
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-08-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## apple手机浏览器兼容fixed

#### 不兼容fixed

苹果手机不兼容fixed，对于fixed元素的处理同static

整个body高度不超出手机屏幕 浮动的部分使用absolute定位，主体部分滚动 overflow:scroll

#### 隐患

使用上述方法会产生隐患

当网页被iframe引用时，在苹果手机中会无法滚动。

由于body高度不超过手机屏幕 在苹果手机的浏览器加载时，有时会高度固定住

####解决方法

>>html部分
```
<div class="scroll-wrapper">
 <iframe src=""></iframe>
</div>
```
>>css部分
```
.scroll-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  /* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */
}
.scroll-wrapper iframe {
  /* 你自己指定的样式 */
}
```