移动端 iframe 内容的 scroll 滚动事件不触发

Question

测试环境:IOS

测试背景:
移动端 主体页面 a;
需要被引入的 iframe 页面 b;

测试反馈：
iframe 的 src 链接的页面b是一个列表页，b 页面下拉到底部时会 ajax 请求加载下一页列表数据。

现在在 IOS 上，发现在 a 上滚动时不会触发 b上的 window.onscroll 事件（b 页面上绑定有 window.onscroll 事件来监听是否页面拉到底部了）

这里是代码截图：

b 页面是线上的页面，我无法修改，只能修改 a 页面上得代码。
请问各位大大，这个问题有什么解决办法吗？多谢各位！！

Answer 1

试试我的 :

.page {
  background-color: #ffffff;
  overflow-x: hidden;
  height: 100vh;
  box-sizing: border-box;
  margin: 0 15px 0 15px;
  position: relative;

  > .content {
    width: 100%;
    height: 100%;
    padding-bottom: 15px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;

    // https://blog.csdn.net/qq_25252769/article/details/76045835
    overflow-y: scroll; //或overflow：auto;

    > iframe {
      width: 100%;
      min-height: 100%;
    }
  }
}

Answer 2

A页面滚动，其实是滚动的A页面的滚动条，B页面这个时候应该没有出现滚动条吧。
ps:iframe在手机中问题多多，之前我们项目中也遇到iframe的各种问题，后来果断弃用iframe

Answer 3

iframe 在移动端好多 bug ,弃用吧 ,确实有一个不能滚动的 bug. ios/anriod 下都有. (不同的版本还有区别)

建议不要在移动端用.

Answer 4

请问楼主这个问题解决了吗？我现在项目也遇到了这个问题

Answer 5

楼主这样两个页面会存在跨域的问题。ios 要让引入的iframe页面滚好像没办法。只能想办法让引入iframe的父页面去滚动

Answer 6

.container{

-webkit-overflow-scrolling: touch;
overflow-y: scroll;

}

IOS 加上-webkit-overflow-scrolling: touch; 就可以了
安卓还不知道。。正在纠结中