DOM鼠标滚轮事件

74 阅读 0 评论 49 点赞

我是靠谱客的博主隐形朋友，最近开发中收集的这篇文章主要介绍DOM鼠标滚轮事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #box1{
      width:100px;
      height: 100px;
      background-color: red;
    }
  </style>
  <script>
    window.onload=function (){
    /*
    * 当鼠标滚轮向下滚动时，box1变长
    *   当滚轮向上滚动时，box1变短
    * */
      var box1 = document.getElementById("box1");
    //  为box1绑定一个鼠标滚轮滚动的事件
    //  onmousewheel滚轮事件被弃用，新的为onwheel
    //  但火狐不支持该属性
    //  在火狐中需要使用DOMMouseScroll来绑定滚动事件
    //    但该事件需要通过addEventListener（）函数来绑定
      box1.onwheel=function (event){
      //  判断鼠标滚轮滚动的方向
      //deltaY属性在向下滚动时返回正值，向上滚动时返回负值，否则为0。
        if(event.deltaY>0){
          box1.style.height=box1.clientHeight-10 +"px";
        }else {
          box1.style.height=box1.clientHeight+10 +"px";
        }
      }
    /*
    * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
    * */  
    }
  </script>
</head>
<body>
<div id="box1"></div>
</body>
</html>