我需要创建一个 UI,其中的框排成一排,用户可以滚动该行以一次查看一个框。此外,有些框比其他框高,在这种情况下,用户应该能够垂直滚动该框。这必须与滑动手势以及鼠标一起使用。我的 HTML 是这样的:
<div class="player-content">
<article id="slide1"><img src="img/session1/screen1.png" width="760" height="400" alt="screen 1"></article>
<article id="slide2"><img src="img/session1/screen2.png" width="760" height="400" alt="screen 2"></article>
<article id="slide3"><iframe width="760" height="400" src="http://www.youtube.com/embed/VRKcDAOILI4" frameborder="0" allowfullscreen></iframe></article>
...
</div>
使用smoothDivScroll,我可以使用这个JS让整行框滚动得很好:
$("div.player-content").smoothDivScroll({
mousewheelScrolling: 'horizontal',
hotSpotScrolling: false,
touchScrolling: true
});
但是,如果我尝试使用此代码使元素垂直滚动,所有滑动手势都会中断:
$('div.player-content').find('article').smoothDivScroll( {
mousewheelScrolling: 'vertical',
hotSpotScrolling: false,
touchScrolling: true
});
任何帮助,将不胜感激。