Bootstrap 5 Carousel swipe to slide interaction breaks with inner elements using overflow? (Vertical scrolling breaks left to right swipes)

Issue

Been searching for a day and no one on the internet seems to have this problem. I have a Bootstrap 5 carousel, relatively vanilla setup except I removed the buttons to solely rely on swiping to navigate through carousel-items.

Swiping left to right works just like the samples, no problem, until I allow the content inside them to be vertically scrollable via overflow-y being set to either auto or scroll in CSS. Then it's like the inner element handles the pointer events and does not propagate them further to the parent elements. I can't find any way to force propagate the events.

What am I missing here? How can I get the carousel-inner (or carousel object in general) to continue processing swipe events with a overflow-y child elements?

The 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 -->

The CSS:

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

Probably irrelevant context: I am using stimulus to handle some other JavaScript needs, thus the controller attributes. I am explicitly calling the carousel constructor from there, per the bootstrap docs, just to get swiping working at all. I have to customize CSS via an inner class (pool-carousel-inner) because I use carousels in multiple other places that behave and look differently.

I've also done things like setting my pool-carousel-inner class width to 50% and can verify the swipe definitely still works on the "empty" space that the inner element doesn't take up (i.e. the space represented by the carousel-inner element that is NOT covered by the pool-carousel-inner element), so I know the carousel is setup correctly. But if I start a swipe/drag left-right over the inner content, it's like it's trying to scroll the whole browser window and the interaction events don't get handled by bootstrap.

Solution

I was able to find a workaround/fix for this. I had to take Bootstrap's most basic example and carefully watch what it was doing with class lists in the debug console to figure this out, because it's not well documented anywhere.

It seems when you put an overflow style on an element, it takes control of touch input away from the browser on some level and so pointer events stop propagating? I was able to restore it by adding a touch-action style to the inner element like so:

Solution

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

Answered By - sampenguin