您的位置:

JS滚轮事件详解

一、滚轮事件简介

JS滚轮事件是指当用户滚动鼠标滑轮时,触发的一类事件。这个事件可以在Web应用程序中应用,实现一些非常有用的功能,比如放大或缩小图像,滚动页面等。

JS滚轮事件在不同的浏览器中有不同的名称,比如Firefox和Chrome使用的是"wheel"事件,IE和Edge使用的是"mousewheel"事件。为了实现统一,基本上我们会同时使用两个事件。


// Firefox和Chrome使用的事件
window.addEventListener("wheel", function(event){
    console.log(event.deltaY);
});

// IE和Edge使用的事件
window.addEventListener("mousewheel", function(event){
    console.log(event.deltaY);
});

上述代码演示了如何监听滚轮事件,并打印出其中垂直方向的滚动距离。deltaY的值为正表示向上滚动,为负表示向下滚动。

二、滚轮事件的兼容性处理

由于不同的浏览器有不同的滚轮事件名称和相应的属性,所以要对兼容性进行处理,保证代码在不同的浏览器中都能够正常工作。


function addWheelListener(elem, callback) {
  if (elem.addEventListener) {
    if ('onwheel' in document) {
      // IE9+, FF17+, Ch31+
      elem.addEventListener("wheel", callback);
    } else if ('onmousewheel' in document) {
      // legacy events for older browsers
      elem.addEventListener("mousewheel", callback);
    } else {
      // Firefox 16-
      elem.addEventListener("MozMousePixelScroll", callback);
    }
  } else { // IE8-
    elem.attachEvent("onmousewheel", callback);
  }
}

// 使用方法:
addWheelListener(window, function(event){
    console.log(event.deltaY);
});

上述代码演示了如何使用一个公用的滚轮事件监听方法addWheelListener,以在不同浏览器中通用。该函数由Scott O'Hara在GitHub上公开。主要思路是检查浏览器是否支持"wheel"事件和"mousewheel"事件,如果都不支持,则使用"MozMousePixelScroll"事件(在Firefox早期版本中使用)。

三、禁止默认滚动行为

JS滚轮事件默认会触发浏览器的滚动,也就是说,当用户使用鼠标滚轮时,页面也会滚动。然而,在某些情况下,我们可能需要禁止默认滚动行为,比如在自定义滚动条时,需要通过JS来实现滚动,并禁止浏览器的默认行为。


// 阻止浏览器窗口默认滚动
window.addEventListener("wheel", function(event){
    event.preventDefault(); // 阻止默认滚动
});

// 阻止某个元素的默认滚动
var elem = document.getElementById("my-elem");
elem.addEventListener("wheel", function(event){
    event.preventDefault();
});

上述代码演示了如何使用preventDefault()方法来禁止默认滚动行为。如果希望禁止某个元素的滚动行为,可以将其滚动事件监听器绑定到该元素上,并调用preventDefault()方法来阻止其默认滚动行为。

四、滚动方向的控制

滚轮事件的deltaY值表示垂直方向的滚动距离,而deltaX则代表水平方向的滚动距离。有时我们需要限制滚动的方向,比如只能垂直滚动或水平滚动。这时,可以使用scrollLeft和scrollTop属性来控制滚动的方向。


// 禁止水平滚动,只允许垂直滚动
var elem = document.getElementById("my-elem");
elem.addEventListener("wheel", function(event){
    event.preventDefault();

    var delta = event.deltaY || event.detail || event.wheelDelta;

    if(delta < 0 && this.scrollTop <= 0) return;
    if(delta > 0 && this.scrollTop >= this.scrollHeight - this.offsetHeight) return;

    this.scrollTop += (delta < 0 ? -30 : 30);
    // 滚动30px高
});

上述代码演示了如何在一个元素上实现垂直滚动,同时禁止水平滚动。通过监听该元素的滚轮事件,在触发时计算出滚动方向,并根据滚动的位置来限制滚动的距离。这里使用了scrollTop和scrollHeight属性来计算元素是否滚动到顶部或底部。

五、滚动事件的节流

在处理大量滚轮事件时,如果没有做节流处理,可能会导致性能问题。为了避免这种情况发生,可以使用节流函数来限制滚轮事件的触发频率。


// 节流函数
function throttle(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

// 应用到滚轮事件
var elem = document.getElementById("my-elem");
var throttleScroll = throttle(function(event){
    console.log(event.deltaY);
}, 100);

elem.addEventListener("wheel", throttleScroll); // 每100毫秒触发一次

上述代码演示了如何使用节流函数(throttle)来限制滚轮事件的触发频率。在设置一个节流的时间间隔后,每次触发滚轮事件时,将事件的处理函数传递给节流函数,节流函数会在特定时间间隔内执行一次事件处理函数。

总结

JS滚轮事件是Web开发中非常重要的一部分。了解JS滚轮事件的基本概念、兼容性处理、禁止默认滚动、滚动方向控制和节流处理,能够帮助我们更好地应用这个事件,实现各种应用程序的需求。在开发过程中,我们需要根据实际情况,对这些方面进行综合考虑,并不断优化其性能和交互体验。

JS滚轮事件详解

2023-05-20
鼠标滚轮事件详解

2023-05-21
如何使用PS鼠标滚轮放大缩小

2023-05-10
java方法整理笔记(java总结)

2022-11-08
js移动端触摸事件完整代码,移动端触屏事件

本文目录一览: 1、JS移动端获取触控位置 2、javascript 在移动端怎么做到左右触摸事件 ontouchmove吗?求代码 3、如何js实现触屏点击事件 JS移动端获取触控位置 1、如图位置

2023-12-08
简单的js图片滚动轮播代码,简单的js图片滚动轮播代码大全

2022-11-23
js事件中change,js事件中监听其他事件

本文目录一览: 1、js中的change事件不起作用 2、js中关于change的问题 3、这段JS代码为什么change事件中先删除上一次事件创建的option删不干净,会剩下一个城市 4、汇总js

2023-12-08
js选中事件,js下拉框选中事件

2023-01-03
js选中事件,js选择框改变事件

2023-01-07
深入浅出JS滑动事件

2023-05-19
鼠标滚轮不能拖拽图纸,鼠标滚轮不能拖动

2023-01-04
js手机轮播代码是什么(JavaScript轮播)

本文目录一览: 1、手机app滑动轮播原生js怎么写 2、图片自动播放轮播JQ,js代码。 3、js实现轮播代码怎么写? 4、JS轮播弹窗代码 手机app滑动轮播原生js怎么写 下面是提供的一个dem

2023-12-08
JS全屏代码详解

2023-05-16
JS滚动事件详解

2023-05-21
js待办事项列表添加删除代码的简单介绍

本文目录一览: 1、“点击此处可添加笔记”的代码怎么写 2、js动态添加、删除html代码 3、vivo手机便签怎么一起删 “点击此处可添加笔记”的代码怎么写 输入符号就可以了第一步打开手机,点击备忘

2023-12-08
发篇java复习笔记(java课程笔记)

2022-11-09
java包笔记,Java语言包

2022-11-18
onscroll事件详解

2023-05-21
印象笔记记录java学习(Java成长笔记)

2022-11-12
重学java笔记,java笔记总结

2022-11-23