前言
項(xiàng)目中，有時(shí)需要監(jiān)聽(tīng)鼠標(biāo)的滾動(dòng)事件，根據(jù)鼠標(biāo)的滾動(dòng)方向做出相應(yīng)的事件處理，此時(shí)我們可以使用jquery.mousewheel.js插件。
jquery.mousewheel.js插件基于jquery的支持，使用前需要引入jquery。
使用方法
需要把 mousewheel 事件綁定到一個(gè)元素上即可。當(dāng)然也可以使用類似 jQuery 中其他的事件方法寫(xiě)法。
// 方式1：using on
$('#某個(gè)元素').on('mousewheel', function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
// 方式2：using the event helper
$('#某個(gè)元素').mousewheel(function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
// 方式3：如果想要對(duì)整個(gè)窗口進(jìn)行滾輪事件監(jiān)聽(tīng)，可以將監(jiān)聽(tīng)添加在 window 上。
$(window).mousewheel(function(event) {
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
屬性值
deltaX：值為負(fù)的（-1），則表示滾輪向左滾動(dòng)。值為正的（1），則表示滾輪向右滾動(dòng)。
deltaY：值為負(fù)的（-1），則表示滾輪向下滾動(dòng)。值為正的（1），則表示滾輪向上滾動(dòng)。
deltaFactor：增量因子。通過(guò) deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到瀏覽器實(shí)際的滾動(dòng)距離。
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery-mousewheel</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jquery-mousewheel.js"></script>
<style></style>
</head>
<body>
<div id="cube"></div>
</body>
<script>
$(function() {
$(window).mousewheel(function(event) {
//輸出滾輪事件響應(yīng)結(jié)果
console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
});
</script>
</html>
