0

ボックスが一列に並べられた UI を作成する必要があり、ユーザーは行をスクロールして一度に 1 つのボックスを表示できます。また、一部のボックスは他のボックスよりも背が高いため、ユーザーはそのボックスを垂直方向にスクロールできる必要があります。これは、マウスだけでなくスワイプ ジェスチャでも機能する必要があります。私の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
});

どんな助けでも大歓迎です。

4

1 に答える 1