横長の要素をマウスホィールで横スクロール

javascript関連
2022年8月10日

縦書きサイトで実装。
縦書きなので画面右端が出発点にし、マウスホイールを手前に回すと右から左にスクロールするという仕様にした。

$(function () {$.fn.mycus_hScroll = function (amount) {
	amount = amount || 120;
	$(this).bind("DOMMouseScroll mousewheel", function (event) {
		var oEvent = event.originalEvent, 
		direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta, 
		position = $(this).scrollLeft();
		position += direction > 0 ? -amount : amount;
		$(this).scrollLeft(position);
		event.preventDefault();
	})
};
});

$(function() {
	$("●●スクロールさせたいid、classなど●●").mycus_hScroll(60); // スクロール量を調節
});

参考サイト：https://atelierroi.com/tecnicalnote/js/mousescroll1/

PAGE TOP