jQuery监听鼠标滚轮事件

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

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

<div id="table0" style="height: 500px; width: 500px;">
  <div id="tableCon" style="height: 1500px; width: 500px;">
    内容
  </div>
</div>

js代码：

$('#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);
});

最后

以上就是洁净花卷最近收集整理的关于jQuery监听鼠标滚轮事件的全部内容，更多相关jQuery监听鼠标滚轮事件内容请搜索靠谱客的其他文章。