qinyi素材网
当前位置: 首页 > WEB教程 > 使用jquery.mousewheel.js获取鼠标滚动事件

使用jquery.mousewheel.js获取鼠标滚动事件

  时间: 2021-11-05   阅读:852
简要教程

一个jQuery插件,通过增量标准化添加跨浏览器鼠标滚轮支持。使一个页面可以同时拥有两个滑块区域,并且能够通过捕获到用户是向上还是向下滑动,如果deltaY参数是-1就是向下滑动,为1就是向上滑动。还能通过deltaFactor参数设置用户滑动滚轮的距离,是一个在制作网页的实用插件。

使用方法

在HTML中引入jQuery和mousewheel的js

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>

只需要将mousewheel事件绑定到一个元素上就能使用了,插件提供了两个名为mousewheelunmousewheel的助手方法,其作用与jQuery中的其他事件助手方法类似。

初始化插件

// using on
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

// using the event helper
$('#my_elem').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

参数介绍

在元素上绑定好事件之后,鼠标滚轮在元素区域内进行上下滑动时就会触发方法。
deltaY:上下方向的滑动,1为向上滑动,-1为向下滑动。
deltaFactor:滑动的增量因子,默认为100。

github地址https://github.com/jquery/jquery-mousewheel

上一篇: 下一篇: