jQuery监听鼠标滚轮事件

119 阅读 0 评论 79 点赞

我是靠谱客的博主洁净花卷，这篇文章主要介绍jQuery监听鼠标滚轮事件，现在分享给大家，希望可以做个参考。

jQuery监听鼠标滚轮事件，通过鼠标滚轮可以做一些逻辑。
这里写了鼠标滚轮滚动控制元素的top值，实现鼠标滚轮滚动元素上下滚动。

html代码大致如下(主要是js代码)

复制代码

1
2
3
4
5
6
<div id="table0" style="height: 500px; width: 500px;">
  <div id="tableCon" style="height: 1500px; width: 500px;">
    内容
  </div>
</div>

js代码：

复制代码

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
$('#table0').css('position', 'relative');
$('#tableCon').css({ 'position': 'absolute', 'top': '0' });
$('#tableCon').on("mousewheel DOMMouseScroll", function (e) {
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox

    // 获取事件发生时元素的top值
    var topnum = Number($('#tableCon')[0].style.top.replace('px', ''))
    // 存放应该设置的元素的top值
    var topStr = '';
    if (delta > 0) {
        // 向上滚
        if (topnum + 20 >= 0) {
            topStr = '0px';
        } else {
            topStr = topnum + 20 + 'px';
        }
    } else if (delta < 0) {
        // 向下滚
        if (topnum - 20 <= -1000) {
            topStr = '-1000px';
        } else {
            topStr = topnum - 20 + 'px';
        }
    }
    $('#tableCon').css('top', topStr);
});