• 原生
  • jquery

原生

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 获取要监听滚轮事件的元素
var element = document.getElementById("myElement");
// 添加滚轮事件监听器
if (element.addEventListener) {
  // 标准浏览器
  element.addEventListener("wheel", handleScroll, false);
} else {
  // IE 9及之前的版本
  element.attachEvent("onmousewheel", handleScroll);
}
// 滚轮事件处理函数
function handleScroll(event) {
  event = event || window.event; // 兼容性处理
  var delta = event.deltaY || event.detail || event.wheelDelta; // 获取滚动的距离

  // 根据滚动的距离执行相应的操作
  if (delta < 0) {
    // 向上滚动
    console.log("向上滚动");
  } else {
    // 向下滚动
    console.log("向下滚动");
  }
  // 阻止事件的默认行为（例如页面滚动）
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}

jquery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 监听滚轮事件
$(window).on("mousewheel DOMMouseScroll", handleScroll);

// 滚轮事件处理函数
function handleScroll(event) {
  var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;

  // 根据滚动的距离执行相应的操作
  if (delta > 0) {
    // 向上滚动
    console.log("向上滚动");
  } else {
    // 向下滚动
    console.log("向下滚动");
  }
  // 阻止事件的默认行为（例如页面滚动）
  event.preventDefault();
}