jquery、Javascript实现鼠标滚轮滑动使横向滚动条滑动

jquery实现鼠标滚轮滑动使横向滚动条滑动

刚找到的方法，记一下。

HTML代码:

<div style="width: 5000px;">test</div>

jQuery代码:

$(function() {
	var scroll_width = 100;  // 设置每次滚动的长度，单位 px
	var scroll_events = "mousewheel DOMMouseScroll MozMousePixelScroll";  // 鼠标滚轮滚动事件名
	$(document).on(scroll_events, function(e) {
		var delta = e.originalEvent.wheelDelta;  // 鼠标滚轮滚动度数
		// 滑轮向上滚动，滚动条向左移动，scrollleft-
		if(delta > 0) {
			$("html").scrollLeft($("html").scrollLeft() - scroll_width);  
			// 这里的两个html是指包含横向滚动条的那一层
		}
		// 滑轮向下滚动，滚动条向右移动，scrollleft+
		else {
			$("html").scrollLeft($("html").scrollLeft() + scroll_width);
		}
	});
});

JavaScript代码

暂不兼容Webkit（Chrome, Safari）

window.onload = function() {    // 监听鼠标滑轮
	var mousewheelevt = (/Firefox/i.test(navigator.userAgent))
		?"DOMMouseScroll" : "mousewheel";
	if(document.attachEvent) {
		document.attachEvent("on" + mousewheelevt, function(e){
			mousewheel_event(e.wheelDelta);
		});
	}else if(document.addEventListener) {
		document.addEventListener(mousewheelevt, function(e){
			mousewheel_event(e.detail);
		}, false);
	}
	// 设置每次滚动长度，单位 px
	var scroll_width = 100;
	function mousewheel_event(delta) {
		// 滑轮向上滚动，滚动条向左移动，scrollleft-
		if(delta > 0) {
			document.getElementsByTagName("html")[0].scrollLeft
				-= scroll_width;
		}
		// 滑轮向下滚动，滚动条向右移动，scrollleft+
		else {
			document.getElementsByTagName("html")[0].scrollLeft
				+= scroll_width;
		}
	}
};