Allow vertical swiping on child elements and horizontal swiping scrolls side-to-side on parent element using jQuery

Question

I have an element that contains a bunch of columns. On a touch device, the columns should be able to scroll up and down using the touch event. When swiping left to right / right to left, I need the parent element / container to horizontally scroll.

The issue I'm running into now is that anytime you try to touch/scroll in one of the columns, it doesn't horizontally scroll the parent element. How can this be accomplished?

I am using the jQuery Perfect Scrollbar plug-in.

CodePen (should be tested on a touch device)

HTML

<main>
  <section class="red">
    <p>Content...</p>
  </section>
  <section class="green">
    <p>Content...</p>
  </section>
  <section class="blue">
    <p>Content...</p>
  </section>
  <section class="yellow">
    <p>Content...</p>
  </section>
</main>

CSS

main {
  height: 300px;
  overflow-y: hidden;
  position: relative;
  white-space: nowrap;
}

section {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  white-space: normal;
  height: 300px;
}

p {
  padding: 1em 2em;
  width: 300px;
}

jQuery

$('section').perfectScrollbar();

Answer 1

This seems to work properly on my phone.

$('section').perfectScrollbar({
    suppressScrollX: true
});

$('main').perfectScrollbar({
  suppressScrollY: true
});

Of course, one could alter the library itself to support the passage of an alternative scrolling element so one doesn't have to use the library twice. That may be a little more time that you're willing to invest, however.