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

Question

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

示例：

<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 滚动条，但它在那里。

Answer 1

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

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

已更新 JSFiddle。

Answer 2

我忘了怎么做，重新发现了社区修改器maxSize. Which should do what you want: https://codesandbox.io/s/great-tesla-3roz7?file=/src/index.js:222-229

注意：此代码是从上面的 codesandbox link 复制而来的：


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]
});

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

How to make popper show the scrollbars when it doesn't fit the viewport?

javascript

css

popper.js