Bootstrap 5轮播内元素设overflow-y后左右滑动交互失效问题

问题原因 #

当子元素设置overflow-y: auto/scroll后，浏览器会优先将指针滑动事件绑定到该子元素，用于处理滚动操作，导致父级Bootstrap轮播无法捕获左右滑动事件，进而无法触发轮播切换。

解决方案 #

方法1：用CSS touch-action 限定触摸行为 #

给垂直滚动的子元素添加touch-action: pan-y，明确告诉浏览器该元素仅处理垂直方向的触摸滚动，横向触摸事件会自动向上传递给父级轮播。

修改你的CSS代码：

.pool-carousel-inner {
    overflow-y: auto;
    touch-action: pan-y; /* 仅允许垂直触摸滚动 */
}

这个方法最简洁，无需额外JS，现代浏览器兼容性良好。

方法2：通过Stimulus控制器手动处理滑动事件 #

如果需要自定义滑动逻辑或阈值，可以在你的Stimulus控制器中监听子元素的触摸事件，判断滑动方向后触发轮播切换。

更新pool-carousel控制器代码：

import { Controller } from "@hotwired/stimulus"
import Carousel from 'bootstrap/js/dist/carousel'

export default class extends Controller {
  static targets = ["carouselInner"]

  connect() {
    this.carousel = new Carousel(this.element, {
      touch: true,
      ride: false
    })

    const scrollEl = this.carouselInnerTarget.querySelector('.pool-carousel-inner')
    let startX = 0

    // 记录触摸起始位置
    scrollEl.addEventListener('touchstart', (e) => {
      startX = e.touches[0].clientX
    })

    // 判断滑动方向并触发轮播切换
    scrollEl.addEventListener('touchend', (e) => {
      const endX = e.changedTouches[0].clientX
      const diffX = endX - startX

      // 滑动距离超过50px时触发切换（可自定义阈值）
      if (Math.abs(diffX) > 50) {
        diffX > 0 ? this.carousel.prev() : this.carousel.next()
      }
    })
  }
}

方法3：调整事件冒泡（不推荐） #

通过阻止子元素横向滑动的默认行为，让事件向上传递，但这种方法可能影响滚动性能，仅作为备选：

const scrollEl = document.querySelector('.pool-carousel-inner')
scrollEl.addEventListener('touchmove', (e) => {
  const touch = e.touches[0]
  const deltaX = touch.clientX - (scrollEl.dataset.lastX || 0)
  // 横向滑动距离大于纵向时，阻止默认滚动行为
  if (Math.abs(deltaX) > Math.abs(e.deltaY)) {
    e.preventDefault()
  }
  scrollEl.dataset.lastX = touch.clientX
}, { passive: false })

验证 #

修改完成后，在pool-carousel-inner区域内左右滑动应能触发轮播切换，垂直滑动仍可正常滚动内部内容。

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