ADF 12.2.1.0中af:menu组件在Chrome滚动后失效问题求助

我之前在ADF 12.2.1.0版本开发时也碰到过一模一样的问题，这是该版本和Chrome浏览器的兼容性bug——当页面滚动后，ADF的菜单弹出面板（popup）的位置计算逻辑出现偏差，导致菜单无法正常响应点击或下拉，而Firefox的坐标计算机制和Chrome不同，所以没触发这个问题。下面是几个亲测有效的解决方案：

方案1：改用组件内部滚动替代窗口滚动 #

不要依赖窗口滚动，而是让panelGroupLayout自身成为滚动容器，这样ADF能正确跟踪菜单的位置：

<af:panelGroupLayout layout="vertical" 
                     scrollPolicy="scroll" 
                     inlineStyle="height:2000px; width:100%;">
  <!-- 你的af:menu组件放在这里 -->
  <af:menu text="主菜单">
    <af:commandMenuItem text="菜单项1"/>
    <af:commandMenuItem text="菜单项2"/>
  </af:menu>
</af:panelGroupLayout>

这种方式把滚动限制在组件内部，避免了窗口滚动带来的坐标偏移问题。

方案2：通过JS监听滚动事件重置菜单状态 #

如果必须保留窗口滚动，可以添加客户端滚动监听，在滚动时关闭已打开的菜单，强制重新计算位置：

<af:resource type="javascript">
  function resetMenusOnScroll() {
    // 获取页面所有af:menu组件
    var allMenus = AdfPage.PAGE.getComponentsByType('oracle.adf.RichMenu');
    allMenus.forEach(function(menu) {
      // 如果菜单处于弹出状态，关闭它
      if (menu.isPopupVisible()) {
        menu.getPopup().hide();
      }
    });
  }
</af:resource>

<af:document>
  <!-- 给页面添加滚动监听 -->
  <af:clientListener method="resetMenusOnScroll" type="scroll"/>
  <!-- 你的页面内容 -->
  <af:panelGroupLayout layout="vertical" inlineStyle="height:2000px;">
    <af:menu text="主菜单">
      <af:commandMenuItem text="菜单项1"/>
      <af:commandMenuItem text="菜单项2"/>
    </af:menu>
  </af:panelGroupLayout>
</af:document>

滚动时关闭打开的菜单，用户再次点击时会重新计算弹出位置，就能正常使用了。

方案3：升级ADF补丁 #

Oracle在ADF 12.2.1.0的后续补丁集中修复了这个Chrome兼容性问题，你可以在Oracle支持平台上查找对应版本的滚动组件相关补丁，升级后问题会彻底解决。

方案4：固定菜单弹出位置 #

给af:menu设置固定的弹出位置，绕过动态坐标计算：

<af:menu text="主菜单" popupPosition="under">
  <af:commandMenuItem text="菜单项1"/>
  <af:commandMenuItem text="菜单项2"/>
</af:menu>

popupPosition可选值还有above、left等，根据你的布局选择合适的位置，这种方式能避免动态计算出错。

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