Shepherd 项目中如何配置 FloatingUI 选项以固定工具提示位置

问题背景

在使用 Shepherd 项目创建导览工具提示时，开发者有时需要固定工具提示的位置，防止其随页面滚动而移动。这涉及到对 FloatingUI 选项的配置，特别是 autoUpdate 中的 ancestorScroll 参数。

解决方案

方法一：通过 JavaScript 配置

在 JavaScript 中，可以通过以下方式配置 Shepherd 导览的 FloatingUI 选项：

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    floatingUIOptions: {
      middleware: [
        autoUpdate({
          ancestorScroll: false
        })
      ]
    }
  }
});

需要注意的是，使用前需要确保已正确导入 FloatingUI 的 autoUpdate 方法。

方法二：防止 body 滚动

另一种更简单的解决方案是直接防止 body 元素的滚动，这种方法虽然简单粗暴，但在某些场景下可能更为实用：

document.body.style.overflow = 'hidden';

当导览结束时，再恢复滚动：

document.body.style.overflow = '';

技术要点解析

1. FloatingUI 集成：Shepherd 底层使用 FloatingUI 来处理工具提示的定位，因此可以直接传递 FloatingUI 的配置选项。

2. autoUpdate 机制：FloatingUI 的 autoUpdate 方法负责在页面变化时自动更新元素位置，ancestorScroll: false 参数可以禁止在祖先元素滚动时更新位置。

3. CDN 使用场景：对于通过 CDN 引入的情况，可以通过全局对象访问 FloatingUI 的方法，配置方式与模块化引入类似。

最佳实践建议

1. 优先考虑使用 FloatingUI 的原生配置，这能提供更精细的控制。

2. 在简单场景下，防止 body 滚动的方法可能更易于实现和维护。

3. 记得在导览结束后恢复页面原始状态，特别是使用防止滚动方法时。

4. 测试不同浏览器和设备上的表现，确保定位行为符合预期。

通过合理配置这些选项，开发者可以创建出位置稳定、用户体验良好的导览工具提示。