允许对子元素进行垂直滑动,使用jQuery在父元素上左右滚动水平滑动

Question

我有一个包含一堆列的元素.在触摸设备上,列应该能够使用触摸事件向上和向下滚动.当从左到右/从右向左滑动时,我需要父元素/容器水平滚动.

我现在遇到的问题是,无论何时尝试触摸/滚动其中一列,它都不会水平滚动父元素.如何实现这一目标？

我正在使用jQuery Perfect Scrollbar插件.

CodePen(应在触摸设备上进行测试)

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

这似乎在我的手机上正常工作。

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

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

当然，人们可以更改库本身以支持替代滚动元素的通过，这样就不必两次使用该库。然而，这可能是您愿意投入的更多时间。