允许使用 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

This 在我的手机上似乎可以正常工作。

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

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

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