主页 / 网络编程 /

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

网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了javascript滚轮事件基础实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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

上一篇：JavaScript函数节流和函数防抖之间的区别 下一篇：基于canvas的二维码邀请函生成插件

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by