如何在不禁用滚动监听器的情况下阻止Popper组件随滚动改变位置？

核心解决思路 #

要让Popper保持静态位置且不禁用滚动监听器，关键是覆盖Popper默认的滚动定位逻辑，锁定元素位置的同时，保留滚动监听器的其他功能。

具体实现方法 #

1. 自定义Modifier拦截定位更新

在Popper配置里加一个自定义modifier，直接接管定位逻辑，不让它随滚动改变位置：

const popperInstance = createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'lockPosition',
      enabled: true,
      phase: 'write',
      fn: ({ state }) => {
        // 把Popper设为fixed定位，锁定初始位置
        state.styles.popper.position = 'fixed';
        // 用初始参考元素的位置来固定Popper坐标
        state.styles.popper.top = `${state.rects.reference.bottom}px`;
        state.styles.popper.left = `${state.rects.reference.left}px`;
        // 阻止Popper后续的定位计算
        return false;
      },
    },
  ],
});

2. 保留滚动监听器的灵活方式

如果需要滚动监听器处理其他业务逻辑（比如触发页面其他交互），可以移除Popper自带的滚动定位回调，但保留监听器本身：

// 拿到Popper注册的滚动监听器
const scrollListeners = popperInstance.state.scrollListeners;
scrollListeners.forEach(listener => {
  window.removeEventListener('scroll', listener);
  // 换成你自己的滚动回调（按需添加）
  window.addEventListener('scroll', () => {
    // 这里写需要保留的滚动相关逻辑
  });
});

3. 快速锁定初始位置的方案

要是只需要固定Popper初始化后的位置，也可以直接修改元素样式锁死，再重新启用监听器：

// 先执行一次初始定位
popperInstance.update();
// 把Popper的位置固定下来
popperElement.style.position = 'fixed';
popperElement.style.top = popperElement.style.top;
popperElement.style.left = popperElement.style.left;
// 先禁用再重新启用监听器，避免Popper更新位置
popperInstance.disableEventListeners();
popperInstance.enableEventListeners();

小贴士：第一种自定义Modifier的方式最推荐，既能精准锁定位置，又能完整保留滚动监听器的其他作用。

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