如何等待ag-grid中DOM元素的overflow-y属性变更为hidden

要监听.ag-floating-bottom元素的overflow-y属性变更为hidden，可以通过以下两种可靠方式实现：

方法一：用MutationObserver监听样式变化 #

这是直接监听DOM属性变更的原生方案，精准捕获样式变化时机：

// 获取目标元素
const floatingBottomEl = document.querySelector('.ag-floating-bottom');
if (!floatingBottomEl) return;

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 仅处理style属性的变更
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      // 获取最终生效的overflow-y值
      const currentOverflowY = getComputedStyle(floatingBottomEl).overflowY;
      if (currentOverflowY === 'hidden') {
        // 这里执行你需要的后续逻辑
        console.log('overflow-y已切换为hidden');
        // 若仅需监听一次，可在此停止观察避免内存泄漏
        observer.disconnect();
      }
    }
  });
});

// 配置观察规则：只监听style属性
observer.observe(floatingBottomEl, {
  attributes: true,
  attributeFilter: ['style']
});

方法二：结合ag-grid筛选事件（框架场景更适配） #

如果是基于ag-grid API开发，可先监听筛选完成事件，再轮询检查样式状态，贴合网格的交互流程：

// 假设已获取ag-grid的gridApi实例
gridApi.addEventListener('filterChanged', () => {
  // 筛选完成后轮询检查（DOM更新存在延迟）
  const checkInterval = setInterval(() => {
    const floatingBottomEl = document.querySelector('.ag-floating-bottom');
    if (!floatingBottomEl) return;
    
    const overflowY = getComputedStyle(floatingBottomEl).overflowY;
    if (overflowY === 'hidden') {
      // 执行目标逻辑
      console.log('overflow-y已变为hidden');
      clearInterval(checkInterval);
    }
  }, 50); // 50ms轮询一次，可根据实际调整间隔
});

关键注意点 #

• 优先使用getComputedStyle获取样式值，而非直接读取element.style.overflowY，因为ag-grid可能通过动态样式表修改属性，前者能拿到最终生效的样式。
• 若仅需单次监听，完成逻辑后记得停止观察或清除定时器，避免不必要的资源消耗。

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