わかりましたので、状況は次のとおりです。水平スクロールの div があります。構造は次のようになります。
<div class="extra-holder">
<div class="extra-holder-inner">
<ul>
<li>Stuff here</li>
<li>Stuff here</li>
<li>Stuff here</li>
<li>Stuff here</li>
</ul>
</div>
</div>
現在、コンテンツは ul 内で動的であるため、固定幅は出ていません。
私は素晴らしいjquery mousewheelプラグインを使用して、divスクロール内のスクロールを垂直ではなく水平にしますが、まったく問題なく動作します。
タッチスクリーンでスクロールしようとすると問題が発生し、まったくスクロールできません。
したがって、私の単純な解決策は、2 つのボタンだけを使用して、内側のコンテナー、extra-holder-inner、左/右をアニメーション化することでした。
そのようです：
$(document).ready(function() {
$('#scroll-r').click(function() {
$('.extra-holder-inner').animate({
left: '-=341' //animating by the width of the li's within the container
}, 500, function() {
// Animation complete.
});
});
});
$(document).ready(function() {
$('#scroll-l').click(function() {
$('.extra-holder-inner').animate({
left: '+=341'
}, 500, function() {
// Animation complete.
});
});
});
これに関する問題は実際には 2 つあります。コンテナをスクロールする代わりに左/右にアニメーション化することと、左側に他のアイテムがない場合にユーザーが左にアニメーション化できることです。これは役に立たない解決策です。
したがって、もっと複雑なことをする必要があるか、コンテナをアニメーション化する代わりに、これらのボタンを左右に 341 ピクセルずつスクロールさせる方法を見つける必要があります。
アイデア、考え？