jquery判断鼠标上下滚动插件jquery.mousewheel.js

mousewheel.js是一个delta规范化、跨浏览器监听鼠标上下滚动的jquery插件,支持IE6+、Firefox、Chrome、Safari浏览器。

通过mousewheel.js插件可以判断鼠标滚轮是向上还是向下滚动、往左还是往右滚动,插件支持mousewheelunmousewheel,通俗地理解即启用插件功能和关闭插件功能的意思。

插件Github主页:https://github.com/jquery/jquery-mousewheel

使用插件功能:

方式一:使用on调用

// using on
$('#element').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
	if(event.deltaY < 0){
		alert('正向下滚动');
	}else{
		alert('正向上滚动');
	}
});

方式二:使用事件

// using the event helper
$('#element').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
	if(event.deltaY < 0){
		alert('正向下滚动');
	}else{
		alert('正向上滚动');
	}
});

插件参数:

  • event.deltaX - 值为负则表示滚轮向左滚动,值为正表示滚轮向右滚动。
  • event.deltaY - 值为负表示滚轮向下滚动。值为正表示滚轮向上滚动。
  • event.deltaFactor - 增量因子,通过deltaFactor * deltaXdeltaFactor * deltaY可以获取浏览器实际的滚动距离。

关闭插件功能:

$('#element').unmousewheel();

默认不启用:

$('#element').unbind('mousewheel');

javascript代码实现请参考:js鼠标滑轮滚动监听触发事件

关键词: jquery插件