我有一个包含一堆列的元素。在触摸设备上,列应该能够使用触摸事件上下滚动。从左向右/从右向左滑动时,我需要父元素/容器水平滚动。
我现在遇到的问题是,无论何时您尝试触摸/滚动其中一列,它都不会水平滚动父元素。如何实现?
我正在使用 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();
最佳答案
This似乎在我的手机上工作正常。
$('section').perfectScrollbar({
suppressScrollX: true
});
$('main').perfectScrollbar({
suppressScrollY: true
});
当然,可以更改库本身以支持替代滚动元素的通过,这样就不必两次使用该库。不过,这可能是您愿意投入的更多时间。
关于javascript - 使用 jQuery 允许在子元素上垂直滑动和在父元素上左右滑动滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24557859/