水平スクロールのdivがあります。
ノート：
実際、ユーザーが右スクロール矢印をクリックしたとき、またはその逆のときに、スクロールで固定ピクセル数を右に移動させたいと思います。
イベントはスクロール時にトリガーされるべきではありません。ユーザーがスクロール矢印を明示的にクリックした場合にのみトリガーされます。
スクロールバーがあり、同じクラスでIDがない複数のdivがあります。
プラグインを使用したくない
ありがとう。
編集 2 : もう 1 つの提案は、スクロール領域の実装に応じて、次のようなことを行うことです(作業 jsfiddleを参照)。
function CustomScrollArrow(elementToScroll) {
var $el = $(elementToScroll);
return $('<a>Click me to scroll</a>').css(/*...*/).click(function(){
$el.scrollLeft($el.scrollLeft()+10);
});
}
$('.ScrollAreaClass').each(function(){
// You could choose to append to your scrolling
// areas or their wrapper classes or whatever...
$('body').append(new CustomScrollArrow(this));
});
あとは、手作りの矢をスタイリングするだけです。
編集 1 : 質問を更新したのを見たので、別の解決策で更新された回答を次に示します。
Kelvin Luck のjScrollPaneなど、カスタマイズされたスクロールバーの実装を使用して、この問題を回避することができます。ソリューションが矢印のクリック イベントを提供する場合、設定は完了です。それ以外の場合は、少しいじってください...
ただし、ブラウザーが矢印クリックを実行する前にアクションを実行しようとしている場合を除き、そのクリックの実際の結果、つまりスクロールにイベント ハンドラーを追加することをお勧めします。
これを行うと、ブラウザーでのスクロールのさまざまな実装間での不一致を回避するのに役立ちます。スクロールが別の方法で実行された場合 (つまり、スワイプ ジェスチャ) は機能し続けます。スクロールバーのデフォルトのブラウザー実装を置き換える JavaScript コードがある場合は、引き続き機能します。
jQuery は、スクロールをキャプチャする.scrollハンドラーと、水平にスクロールされたコンテンツの結果の位置を決定する.scrollLeftを提供します。
動作中の jsfiddleを試すか、以下のコードを参照してください。
// Cache the initial scroll position:
var initialLeftScroll = $('#wrapper').scrollLeft();
// Bind event:
$('#wrapper').scroll(function (ev) {
// Get new horizontal scroll offset:
var currentLeftScroll = $('#wrapper').scrollLeft();
// Determine the difference
// (did the user scroll horizontally or just vertically?):
var leftScrollDifference = currentLeftScroll - initialLeftScroll;
// Now we can check
if (leftScrollDifference) {
/* Do something here */
}
// Reset the cache:
initialLeftScroll = currentLeftScroll;
});
jquery の .scroll 関数を使用できます。