javascript - 使用 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
});

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