Bootstrap 5 Carousel 滑动滑动与使用溢出的内部元素的交互中断？ （垂直滚动会破坏从左到右的滑动）

Question

找了一天了，网上好像没有人遇到这个问题。我有一个 Bootstrap 5 轮播，相对普通的设置，除了我删除了按钮以仅依靠滑动来导航轮播项目。

从左向右滑动的效果就像示例一样，没问题，直到我通过在 CSS 中将

overflow-y

设置为

auto

或

scroll

来允许其中的内容垂直滚动。然后，就像内部元素处理指针事件并且不会将它们进一步传播到父元素一样。我找不到任何方法来强制传播事件。

我在这里缺少什么？如何让 carousel-inner（或一般的 carousel 对象）继续处理带有

overflow-y

子元素的滑动事件？

HTML：

<div class="container pt-3 px-4">
  <div class="row">
    <div id="carouselMembers" class="carousel slide" data-controller="pool-carousel">
      <div class="carousel-inner" data-pool-carousel-target="carouselInner">
        <div class="pool-carousel-inner">
          <!-- lengthy vertically scrolling content -->
        </div>
      </div><!-- carousel-inner -->
    </div><!-- carouselMembers -->
  </div><!-- row -->
</div><!-- container -->

CSS：

.pool-carousel-inner {
    overflow-y: auto;
}

可能不相关的上下文：我正在使用刺激来处理其他一些 JavaScript 需求，因此是控制器属性。根据引导文档，我从那里明确调用轮播构造函数，只是为了让滑动工作正常进行。我必须通过内部类 (pool-carousel-inner) 自定义 CSS，因为我在其他多个行为和外观不同的地方使用轮播。

我还做了一些事情，比如将我的 pool-carousel-inner 类宽度设置为 50%，并且可以验证滑动肯定仍然适用于内部元素不占用的“空”空间（即由carousel-inner 元素未被 pool-carousel-inner 元素覆盖），所以我知道 carousel 设置正确。但是，如果我在内部内容上开始左右滑动/拖动，就好像它试图滚动整个浏览器窗口，并且引导程序不会处理交互事件。

Answer 1

我找到了解决方法/修复此问题。我必须采用 Bootstrap 最基本的示例，并仔细观察它在调试控制台中对类列表所做的操作才能弄清楚这一点，因为它在任何地方都没有很好的记录。

似乎当您在元素上放置

overflow

样式时，它会在某种程度上从浏览器中控制触摸输入，因此指针事件停止传播？我可以通过向内部元素添加

touch-action

样式来恢复它，如下所示：

解决方案

.pool-carousel-inner {
    overflow-x: hidden;
    overflow-y: scroll;
    touch-action: pan-y; // Have to re-set this little hidden gem that bootstrap hides in .pointer-event or swiping breaks
}