jQuery操作鼠标滚轮

93次阅读
没有评论

jQuery可以很方便地操作鼠标滚轮事件。下面是一个使用jQuery来操作鼠标滚轮事件的完整HTML页面示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery操作鼠标滚轮示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #container {
      width: 200px;
      height: 200px;
      background-color: red;
      overflow: scroll;
    }
    #content {
      width: 400px;
      height: 400px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="content"></div>
  </div>
  
  <script>
    $('#container').on('mousewheel', function(event) {
      event.preventDefault();
      var delta = event.originalEvent.wheelDelta;
      $(this).scrollTop($(this).scrollTop() - delta);
    });
  </script>
</body>
</html>

该页面可以实现鼠标滚轮事件的操作:

  1. 在CSS中将#container设置为一个固定宽高,开启滚动条,同时将#content设置为一个更大的宽高。
  2. 在jQuery代码中使用$(‘#container’).on(‘mousewheel’, function(event) {…})监听鼠标滚轮事件,当滚轮事件被触发时,event.originalEvent.wheelDelta获取滚轮滚动的距离,然后使用$(this).scrollTop()函数调整滚动条的位置。

注意,上述代码中,需要在页面中引入jQuery库。在代码中,使用了$(‘#container’).on(‘mousewheel’, function(event) {…})函数,这个函数会在#container元素中发生滚轮事件时被触发,然后在函数内部获取滚轮滚动的距离,并使用$(this).scrollTop()函数调整滚动条的位置,从而实现鼠标滚轮事件的操作。在调用$(this).scrollTop()函数之前,我们还需要使用event.preventDefault()函数来阻止浏览器默认的滚动行为。

正文完
 
评论(没有评论)