网络编程

javascript滚轮控制模拟滚动条
网络编程 2025/10/27 佚名
3 2

此实例通过对滚轮事件的监听，通过滚轮控制滚动条的上下移动，可以将其修改后运用与使用滚轮缩放图片、改变透明度等特效。

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <style type="text/css"> 
   *{ 
    margin: 0; 
    padding: 0; 
   } 
   #boxwrap{ 
    position: relative; 
    width: 15px; 
    height: 500px; 
    margin: 50px auto; 
    box-sizing: border-box; 
    border: 1px solid gainsboro; 
    border-radius: 6px; 
   } 
   #box{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 13px; 
    height: 30px; 
    background: gray; 
    border-radius: 6px; 
   } 
  </style> 
  <script type="text/javascript"> 
   window.onload = function (){ 
    var boxwrp = document.getElementById('boxwrap'); 
    var box = document.getElementById('box'); 
    //兼容firefox 
    if(boxwrp.addEventListener){ 
     document.addEventListener("DOMMouseScroll", fn, false); 
    } 
    document.onmousewheel = fn;//兼容IE、chrome 
     
    function fn(ev){ 
     var ev = ev||event; 
     var bool = false; 
     //IE、chrome 向上：120，向下：-120 
     if(ev.wheelDelta){ 
      bool= ev.wheelDelta > 0"px"; 
      } 
      else{ 
       box.style.top = 0; 
      } 
       
     } 
     else{ 
      if(box.offsetTop<=boxwrp.offsetHeight-box.offsetHeight-10){ 
       box.style.top = box.offsetTop + 10 + "px"; 
      } 
      else{ 
       box.style.top = boxwrp.offsetHeight - box.offsetHeight + "px"; 
      } 
     } 
    } 
   } 
  </script> 
 </head> 
 <body> 
  <div id="boxwrap"> 
   <div id="box"></div> 
  </div> 
 </body> 
</html>

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

标签：
js,滚轮,滚动条
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“javascript滚轮控制模拟滚动条”

暂无“javascript滚轮控制模拟滚动条”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com