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

前端之家收集整理的这篇文章主要介绍了javascript – 允许使用jQuery在子元素上进行垂直滑动并使用水平滑动在父元素上左右滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

我正在使用jQuery Perfect Scrollbar插件.

CodePen(应在触控设备上测试)

HTML

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();
最佳答案
This似乎在我的手机上正常工作.

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

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

当然,可以改变库本身以支持替代滚动元素的通过,因此不必使用库两次.但是,这可能是你愿意投资的时间.

猜你在找的jQuery相关文章