Bootstrap Tour在移动端（iPhone）无法手动滚动问题求助

我之前在项目里也碰到过一模一样的问题——Bootstrap Tour在桌面端运行流畅，一到iPhone上启动引导就完全没法手动滚动，手指滑一下页面直接弹回原位，用户体验特别糟糕。折腾了好几个小时，总结出几个可行的解决方案，你可以按需尝试：

方案1：覆盖默认的滚动锁定CSS（最简单高效） #

Bootstrap Tour启动时会给body自动加上bootstrap-tour-disabled-scroll类，这个类默认设置了overflow: hidden，在iOS上这会直接锁定页面滚动，还触发了讨厌的回弹效果。我们只需要覆盖这个类的样式，就能快速恢复滚动能力：

/* 覆盖Bootstrap Tour的默认滚动锁定样式 */
body.bootstrap-tour-disabled-scroll {
  overflow: auto !important;
  /* 保留iOS特有的弹性滚动特性 */
  -webkit-overflow-scrolling: touch !important;
}

不过这么做可能会导致引导框的位置随着页面滚动而偏移，解决这个小问题很简单——在每个引导步骤显示后，让Tour重新渲染当前步骤的引导框即可：

const tour = new Tour({
  disableScroll: true, // 保持默认的disableScroll配置，我们用CSS覆盖样式逻辑
  onShown: (tourInstance) => {
    // 重新渲染当前步骤，修正引导框位置
    tourInstance.getStep(tourInstance.getCurrentStep()).render();
  }
});

// 初始化并启动引导
tour.init();
tour.start();

方案2：自定义滚动锁定逻辑（更灵活可控） #

如果方案1的引导框偏移问题还是很明显，我们可以完全关闭Bootstrap Tour的默认滚动锁定，自己控制滚动状态和引导框定位：

const tour = new Tour({
  disableScroll: false, // 关闭默认滚动锁定
  onStart: (tourInstance) => {
    // 给body添加自定义类，标记当前处于引导状态
    document.body.classList.add('tour-active');
  },
  onEnd: (tourInstance) => {
    // 引导结束时移除标记类
    document.body.classList.remove('tour-active');
  },
  onShown: (tourInstance) => {
    // 监听页面滚动事件，滚动后重新定位引导框
    const handleScroll = () => {
      tourInstance.getStep(tourInstance.getCurrentStep()).render();
    };
    window.addEventListener('scroll', handleScroll);

    // 步骤切换或引导结束时移除监听，避免内存泄漏
    tourInstance.on('hide', () => {
      window.removeEventListener('scroll', handleScroll);
    });
  }
});

tour.init();
tour.start();

再配合一点CSS优化，增强用户的引导状态感知：

body.tour-active {
  /* 添加半透明背景，区分引导模式和正常模式 */
  background-color: rgba(0, 0, 0, 0.05);
  /* 确保iOS弹性滚动正常生效 */
  -webkit-overflow-scrolling: touch;
}

方案3：禁用Bootstrap Tour的触摸事件拦截（针对iOS特殊场景） #

有时候Bootstrap Tour会拦截iOS的原生触摸事件，导致滚动失效。我们可以关闭它自带的触摸事件处理，然后手动给引导按钮绑定交互逻辑：

const tour = new Tour({
  touch: false, // 关闭Tour自带的触摸事件处理
  // 你的其他引导配置项...
});

// 手动给引导按钮添加触摸事件
tour.on('shown', () => {
  document.querySelectorAll('.tour-next, .tour-prev, .tour-end').forEach(btn => {
    btn.addEventListener('touchend', (e) => {
      e.preventDefault();
      // 根据按钮类名执行对应操作
      if (btn.classList.contains('tour-next')) tour.next();
      if (btn.classList.contains('tour-prev')) tour.prev();
      if (btn.classList.contains('tour-end')) tour.end();
    });
  });
});

tour.init();
tour.start();

这个方法需要注意测试，因为关闭touch选项可能会影响引导框的一些原生交互，所以要确保按钮的点击/触摸都能正常触发对应操作。

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