IOS(mobile)包含iframe的页面滚动

2019-04-29

由来

工作中遇到个需求，移动端页面中，包含不可滚动的 iframe（设置了scrolling="no"，width: 父容器实际宽度, height: iframe实际内容高度），要求整个页面可上下滚动。

接到需求的第一反应，iframe 内外属于两个页面，在 iframe 的滑动操作无法滚动父页面。经过测试后发现，Android 页面中可直接滚动，不受影响，而在 IOS 页面中，滑动 iframe 区域无法触发滚动。

解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
---html
<body>
    <iframe scrolling="no">
    </iframe>
</body>

---scss
    body{
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch; /*关键*/
    }

---js
const iframe = iframeWrapper.querySelector('iframe');
iframe.width = iframe.parentElement.offsetWidth;
iframe.onload = () => {
    iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;
}


最后

希望能帮助到屏幕前遇到类似问题的你！
如果有幸帮助到你，还请Star以支持:)