mousewheel.js是一个delta规范化、跨浏览器监听鼠标上下滚动的jquery插件,支持IE6+、Firefox、Chrome、Safari浏览器。
通过mousewheel.js插件可以判断鼠标滚轮是向上还是向下滚动、往左还是往右滚动,插件支持mousewheel和unmousewheel,通俗地理解即启用插件功能和关闭插件功能的意思。
插件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 * deltaX和deltaFactor * deltaY可以获取浏览器实际的滚动距离。
关闭插件功能:
$('#element').unmousewheel();
默认不启用:
$('#element').unbind('mousewheel');
javascript代码实现请参考:js鼠标滑轮滚动监听触发事件