当popper不适合视口时如何让popper显示滚动条？答案

【问题标题】：How to make popper show the scrollbars when it doesn't fit the viewport?当popper不适合视口时如何让popper显示滚动条？
【发布时间】：2020-10-18 09:17:54
【问题描述】：

我必须处理包含长列表的弹出窗口。如果列表太长，popper 会溢出身体。我想让弹出窗口显示滚动条。

例子：

<body>
  <div class="h-100 d-flex">
    <div id="container" class="mx-auto my-auto bg-grn">
      OOF
    </div>
  </div>
  <div id="tooltip" class="bg-blu overflow-auto" style="color: white">
    <!-- Ideally this should overflow -->
    Long content
  </div>
  <!-- But instead the whole body overflows -->
</body>
<script>
const tooltip = document.getElementById('tooltip')
tooltip.innerText += 'Long content'.repeat(450)

const popper = Popper.createPopper(document.getElementById("container"), tooltip, {
placement: 'right-start'
})
</script>

在JSFiddle 上查看。在 jsFiddle 上，控制台阻止了 x 滚动条，但它就在那里。

【问题讨论】：

标签： javascript css popper.js

【解决方案1】：

我忘记了如何执行此操作，并重新发现了社区修饰符maxSize。哪个应该做你想做的事：https://codesandbox.io/s/great-tesla-3roz7?file=/src/index.js:222-229

注意：此代码是从上面的代码框链接中复制的：


const applyMaxSize = {
  name: "applyMaxSize",
  enabled: true,
  phase: "beforeWrite",
  requires: ["maxSize"],
  fn({ state }) {
    const { height } = state.modifiersData.maxSize;
    state.styles.popper.maxHeight = `${height}px`;
  }
};

const reference = document.querySelector("#reference");
const popper = document.querySelector("#popper");

createPopper(reference, popper, {
  modifiers: [maxSize, applyMaxSize]
});

【讨论】：

这似乎正是我想要的。我很快就会使用它。

【解决方案2】：

您需要设置工具提示的width 和height 才能看到滚动条。这是一个例子：

#tooltip {
  height: 150px;
  max-width: 40vw;
}

更新JSFiddle。

【讨论】：

Popper 使用绝对位置定位工具栏。它使用正确的：自动；和底部：自动；。是否没有选项可以让 popper 将弹出窗口调整到最大可能大小？