如何利用Popper.js让弹出框滚动时固定在父容器内

直接按以下配置调整就能实现需求：

• 配置Popper的边界限制
  在创建Popper实例时，添加preventOverflow修饰符，把边界指定为#container：

  const popperInstance = Popper.createPopper(targetElement, popupElement, {
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          boundary: document.getElementById('container'),
          padding: 8, // 可选，给弹出框和容器边缘留点空隙
        },
      },
    ],
  });
  

• 给父容器设置正确的CSS
  确保#container具备定位上下文和滚动属性，让Popper能正确识别它的边界范围：

  #container {
    position: relative; /* 必须，Popper依赖这个定位上下文计算边界 */
    overflow: auto; /* 内容超出时显示滚动条 */
    height: 100vh; /* 或者设置固定高度，触发滚动行为 */
  }
  

• 滚动时强制更新位置（可选）
  如果滚动过程中弹出框位置有延迟，给父容器加个滚动事件，触发Popper更新：

  const container = document.getElementById('container');
  container.addEventListener('scroll', () => {
    popperInstance.update();
  });
  

原理很简单：preventOverflow是Popper自带的核心修饰符，专门用来限制弹出框不会超出指定边界；父容器的position: relative是关键前提，否则Popper没法基于它计算范围；滚动时手动触发更新，能保证弹出框位置实时贴合容器边界。

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