当前位置:龙哥网 > 网络技术 > jquery判断鼠标上下滚动插件jquery.mousewheel.js(jquery鼠标滚动监听事件)

jquery判断鼠标上下滚动插件jquery.mousewheel.js(jquery鼠标滚动监听事件)

longge5个月前 (12-17)网络技术82

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鼠标滑轮滚动监听触发事件

免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!