javascript滚轮事件基础实例讲解（37）

本文实例为大家分享了js滚轮事件的具体代码，供大家参考，具体内容如下

<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
      #box1{ 
        width: 100px; 
        height: 100px; 
        background-color: red; 
      } 
       
    </style> 
     
    <script type="text/javascript"> 
       
      window.onload = function(){ 
         
        //使div可以跟随鼠标滚轮滚动来改变高度 
        //滚轮向下滚，div变高 滚轮向上滚 div变短 
         
        //获取box1 
        var box1 = document.getElementById("box1"); 
         
        /* 
         * onmousewheel 
         * - 鼠标滚轮滚动的事件，但是该事件火狐浏览器并不支持 
         * - 在火狐中需要使用DOMMouseScroll，这个事件只能通过addEventListener()来绑定 
         */ 
        //为box1绑定一个鼠标滚轮滚动的事件 
        box1.onmousewheel = function(event){ 
          event = event || window.event; 
           
          //判断滚轮滚动的方向 
          /* 
           * wheelDelta 
           * - 事件对象中的属性，可以用来判断鼠标滚轮滚动的方向 
           * - 向下滚 -120 向上滚 +120 
           * - 该属性的值并不重要，重要的是值的符号，需要通过符号来判断滚动的方向 
           * - 但是该属性火狐浏览器并不支持 
           */ 
          //alert(event.wheelDelta); 
           
          /* 
           * 火狐中通过detail来判断方向 
           * - 向上滚 -3  向下滚 +3 
           */ 
          //alert(event.detail); 
           
          if(event.wheelDelta < 0 || event.detail > 0){ 
            //向下滚 
            //增加box1的高度 
            box1.style.height = box1.offsetHeight + 10 + "px"; 
             
          }else{ 
            //向上滚 
            //减小box1的高度 
            box1.style.height = box1.offsetHeight - 10 + "px"; 
          } 
           
           
          /* 
           * 使用addEventListener()绑定的事件，不能通过return false来取消默认行为 
           * 需要调用事件对象 preventDefault()方法来取消默认行为 
           * 但是在IE8中没有该方法 
           */ 
          event.preventDefault &&　event.preventDefault(); 
           
          //当页面中有滚动条时，由于滚轮滚动的默认行为会导致页面整体下移 
          //取消默认行为 
          return false; 
           
        }; 
         
        bind(box1 , "DOMMouseScroll" , box1.onmousewheel); 
         
         
      }; 
       
      function bind(obj , eventStr , callback){ 
         
        if(obj.addEventListener){ 
          //如果是正常浏览器 
          obj.addEventListener(eventStr , callback , false); 
        }else{ 
          //IE8 
          obj.attachEvent("on"+eventStr , function(){ 
            callback.call(obj); 
          }); 
        } 
      } 
       
    </script> 
  </head> 
  <body style="height: 3000px;"> 
     
    <div id="box1"></div> 
     
     
  </body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js # 滚轮事件 # js中鼠标滚轮事件详解(firefox多浏览器) # JS滚轮事件onmousewheel使用介绍 # javascript监听鼠标滚轮事件浅析 # javascript 鼠标滚轮事件 # js捕获鼠标滚轮事件代码 # javascript 兼容鼠标滚轮事件 # javascript实现禁止鼠标滚轮事件 # JavaScript 滚轮事件使用说明 # JavaScript焦点事件、鼠标事件和滚轮事件使用详解 # 两种js监听滚轮事件的实现方法 # 鼠标 # 火狐 # 上滚 # 绑定 # 的是 # 中有 # 大家分享 # 方法来 # 具体内容 # 大家多多 # 可以用来 # 象中 # 滚动条 # 变短 # 但是在 # width # css # type # style # text

返回目录在线咨询

上一篇：C++的契约式编程是什么_C++20 Contracts特性在接口设计中的应用
下一篇：旺旺网站制作冰淇淋怎么样,旺旺冰激凌情侣网名另一半是什么？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

javascript滚轮事件基础实例讲解（37）

您的项目需求