如何仅禁用Fancybox灯箱的向上拖动关闭功能？

Hey there! 针对你想要实现仅支持向下拖动关闭底部弹窗式Fancybox灯箱的需求，我整理了两个实用方案，帮你在等待官方回复期间快速优化用户体验：

方案一：自定义触摸事件拦截（推荐） #

先禁用Fancybox默认的拖拽关闭功能，然后手动监听触摸事件，只在向下拖动达到指定阈值时触发关闭逻辑。这种方式灵活性更高，能完全控制拖动方向：

// 绑定Fancybox并添加自定义拖拽逻辑
Fancybox.bind('[data-fancybox]', {
  dragToClose: false, // 关闭默认拖拽关闭行为
  onInit: (fancybox) => {
    let startTouchY;
    const closeThreshold = 60; // 可根据需求调整触发关闭的拖动距离

    // 记录触摸起始位置
    fancybox.container.addEventListener('touchstart', (e) => {
      startTouchY = e.touches[0].clientY;
    }, { passive: true });

    // 监听触摸移动，判断拖动方向
    fancybox.container.addEventListener('touchmove', (e) => {
      const currentTouchY = e.touches[0].clientY;
      const dragDistance = currentTouchY - startTouchY;

      // 仅当向下拖动（距离为正）且超过阈值时，关闭灯箱
      if (dragDistance > closeThreshold) {
        fancybox.close();
      }
    }, { passive: true });
  }
});

方案二：重写Fancybox默认拖拽行为 #

如果更倾向于利用Fancybox自身的配置，可以重写dragToClose的回调逻辑，限制仅向下拖动允许关闭：

// 全局修改Fancybox拖拽关闭的规则
Fancybox.defaults.dragToClose = {
  y: true, // 开启垂直方向拖拽
  threshold: 60,
  // 自定义拖动判断逻辑
  onDrag: (fancybox, event, delta) => {
    // delta.y为正表示向下拖动，返回true允许关闭；反之阻止
    return delta.y > 0;
  }
};

补充说明 #

• 两个方案中的closeThreshold（阈值）可以根据你的弹窗高度和用户操作习惯调整，一般50-80px比较合适；
• 如果你同时需要支持鼠标拖拽，只需把触摸事件换成鼠标事件（mousedown、mousemove）即可；
• 测试时记得在移动端或浏览器的移动端模拟模式下验证效果，确保向上拖动不会触发关闭，避免出现空白区域的问题。

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