Popper 如何处理滚动穿透问题?,demo

Popper.js是一个轻量级的JavaScript库，用于动态创建和管理CSS定位的ポップアップ元素，比如Bootstrap中的模态框。关于滚动穿透（Scroll Bubbling），当弹出层的内容溢出其容器并且用户尝试滚动内容区域时，原本应该被阻止的滚动事件会穿透到弹出层之外。Popper.js提供了解决这个问题的方法：

1. **设置边界策略** (Boundary Option): Popper允许你指定弹出层不会穿透的边界。例如，`boundary`选项可以设置为`viewport`或一个特定的DOM元素，确保弹出层不会超出屏幕范围。

const popper = new Popper(referenceElement, popperElement, {
  boundary: 'viewport',
});

2. **使用`preventOverflow`插件**: Popper.js本身包含了一个`preventOverflow`插件，它可以限制弹出层的位置，使其始终保持在可视区域内，并自动调整位置以避免滚动穿透。

import { createPopper } from 'popper.js';
import preventOverflow from 'popper.js/plugins/preventOverflow';

createPopper(referenceElement, popperElement, {
  plugins: [preventOverflow()],
  // 其他配置...
});

3. **监听滚动事件**并相应地调整弹出层：虽然不是直接通过Popper.js提供的功能，但在需要的情况下，可以在宿主文档上添加滚动事件处理器，检查弹出层的状态并在必要时调整它。

示例代码（简化版）：

document.addEventListener('scroll', function(event) {
  if (isPopupOutsideViewport(popperElement)) {
    // 调整popper的位置
    popper.scheduleUpdate();
  }
});

function isPopupOutsideViewport(popper) {
  return !popperReferenceRect.includes(popperRect);
}