jQuery监听鼠标滚轮事件

最新推荐文章于 2025-06-11 09:41:47 发布

原创最新推荐文章于 2025-06-11 09:41:47 发布 · 4.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

无脑复制粘贴专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何使用jQuery监听鼠标滚轮事件，通过调整元素的top值实现在页面上滚动的效果。提供了相关的HTML和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
});