求助：iOS 11.3.1 Safari浏览器中Ext JS modern 6.5.3的Iframe滚动问题

我之前在处理Ext JS Modern项目时，也碰到过iOS老版本Safari里iframe滚动失效的情况，尤其是11.x这个版本确实有不少滚动相关的兼容性坑。结合你的场景，给你几个亲测有效的解决方案：

• 强制给iframe添加iOS滚动专属CSS
  iOS Safari需要通过-webkit-overflow-scrolling: touch来启用弹性滚动，同时要确保iframe有明确的高度和溢出设置。你可以在项目的全局样式里添加：

  .x-iframe {
      overflow: auto !important;
      -webkit-overflow-scrolling: touch !important;
      height: 100% !important;
  }
  

  这里用!important是为了覆盖Ext JS框架默认给iframe设置的样式，确保滚动属性生效。

• 在Ext JS组件配置中显式设置样式
  如果全局样式优先级不够，你可以在创建iframe组件的时候直接注入样式：

  Ext.create('Ext.Container', {
      fullscreen: true,
      items: [{
          xtype: 'iframe',
          src: '你的内容链接',
          style: {
              overflow: 'auto',
              '-webkit-overflow-scrolling': 'touch',
              height: '100%'
          }
      }]
  });
  

  这种方式能确保样式直接作用到当前iframe元素上，避免被其他样式覆盖。

• 调整父容器的溢出设置
  有时候Ext JS的容器组件默认的overflow设置会限制iframe的滚动区域，你可以给iframe的父容器添加：

  .x-container {
      overflow: visible !important;
  }
  

  确保父容器不会截断iframe的滚动空间。

• 兜底方案：阻止事件冒泡
  如果以上方法都无效，可能是Ext JS的事件处理和iOS的触摸事件冲突了。你可以监听iframe的触摸事件，阻止事件冒泡：

  const iframeEl = Ext.ComponentQuery.query('iframe')[0].element.dom;
  iframeEl.addEventListener('touchmove', function(e) {
      e.stopPropagation();
  }, { passive: false });
  

  这个方法能避免Ext JS的全局触摸事件干扰iframe的滚动行为。

你可以先从第一个方案开始尝试，大部分情况下添加专属CSS就能解决问题。

内容的提问来源于stack exchange，提问作者Nitin Soni