首页 > 代码库 > onmousewheel&DOMMouseScroll自定义滚动条
onmousewheel&DOMMouseScroll自定义滚动条
简单的自定义滚动条效果
js源码 适合有一定基础的菜鸟 因为我也是个菜鸟 哈哈 不多说 直接奉上代码
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>鼠标滚轮滑动的——滚动条</title> 6 <style> 7 *{padding: 0; margin: 0;} 8 #case{ width: 332px; margin:30px auto;} 9 #parnte{ width: 30px; height: 402px; background-color: #333333; position: relative; float: right;} 10 #div2{width: 30px; height: 30px; background: #00ffff; position: absolute;} 11 #box{ background-color:#cccccc; width:300px; height:400px; border: 1px #000000 solid; overflow: hidden; position: relative; float: left;} 12 #txt{position: absolute; left: 0; top: 0; padding: 10px 5px;} 13 </style> 14 <script> 15 window.onload=function() 16 { 17 // 获取domElement; 18 var oParnt = document.getElementById(‘parnte‘); 19 var oDiv2 = document.getElementById(‘div2‘); 20 var oBox = document.getElementById(‘box‘); 21 var oTxt = document.getElementById(‘txt‘); 22 23 // 初始化 y 24 var disY =0; 25 26 // 绑定事件 兼容主流浏览器 27 fnAddEvent(oDiv2 ,‘mousewheel‘ , fnMouseWheel); 28 fnAddEvent(oDiv2 ,‘DOMMouseScroll‘ , fnMouseWheel); 29 30 fnAddEvent(oParnt ,‘mousewheel‘ , fnMouseWheel); 31 fnAddEvent(oParnt ,‘DOMMouseScroll‘ , fnMouseWheel); 32 33 fnAddEvent(oBox ,‘mousewheel‘ , fnMouseWheel); 34 fnAddEvent(oBox ,‘DOMMouseScroll‘ , fnMouseWheel); 35 36 37 function fnMouseWheel(ev) 38 { 39 var oEvent = ev||event; 40 var bDown = true; 41 // 判断滚轮 方向 42 bDown=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0; 43 if(bDown)//IE 44 { 45 fnScope(oDiv2.offsetTop+10); 46 47 } 48 else//FF 49 { 50 fnScope(oDiv2.offsetTop-10); 51 } 52 // FF 下解决 自带滚动条 滚动事件 53 if(oEvent.preventDefault) 54 { 55 oEvent.preventDefault(); 56 } 57 58 // IE 下解决 自带滚动条 滚动事件 59 return false; 60 } 61 62 oDiv2.onmousedown=function(ev) 63 { 64 var oEvent =ev || event; 65 disY=oEvent.clientY-oDiv2.offsetTop; 66 67 if(oDiv2.setCapture)//IE 68 { 69 70 oDiv2.onmousemove=fnMove; 71 oDiv2.onmouseup=fnUp; 72 oDiv2.setCapture();//获取捕获pc端所有事件 解决IE下 bug 73 } 74 else//FF 75 { 76 alert(‘a‘); 77 document.onmousemove=fnMove; 78 document.onmouseup=fnUp; 79 } 80 return false; 81 }; 82 83 84 85 function fnMove(ev) 86 { 87 88 var oEvent =ev || event; 89 var t=oEvent.clientY-disY; 90 91 fnScope(t); 92 93 94 } 95 96 function fnUp() 97 { 98 this.onmousemove=null; 99 this.onmouseup=null;100 101 if(oDiv2.releaseCapture)102 {103 oDiv2.releaseCapture();104 }105 106 }107 108 // 将限制 返回和 控制文本 滑动的 函数封装 以便 拖拽 和 滚轮 事件的 时候 计算109 function fnScope(t)110 {111 if(t<0)112 {113 t=0;114 }115 else if(t>oParnt.offsetHeight-oDiv2.offsetHeight)116 {117 t=oParnt.offsetHeight-oDiv2.offsetHeight;118 }119 oDiv2.style.top=t+‘px‘;120 // 获得百分比121 var scale= t/(oParnt.offsetHeight-oDiv2.offsetHeight);122 123 oTxt.style.top=-(oTxt.offsetHeight-oBox.offsetHeight)*scale+‘px‘;124 }125 126 };127 128 //绑定事件129 130 function fnAddEvent(obj ,sEvent , fn)131 {132 var fnEvent=fn;133 if(obj.attachEvent)134 {135 fnEvent=function(arguments)136 {137 fn.call(obj, arguments)138 };139 obj.attachEvent(‘on‘+sEvent ,fnEvent );140 }141 else142 {143 obj.addEventListener(sEvent ,fnEvent);144 }145 146 return fnEvent;147 }148 </script>149 </head>150 <body style="height: 800px;">151 <div id="case">152 <div id="parnte">153 <div id="div2"></div>154 </div>155 156 <div id="box">157 <div id="txt">158 新华网天津12月27日电 27日上午，长江水抵达南水北调中线天津市内配套工程的第一站——曹庄泵站，流向天津滨海新区的津滨水厂，并从这里进入天津的千家万户。159 160 记者站在泵站水闸处看到，尽管天津室外温度很低，但经过千里跋涉的长江水水面并无结冰，平缓流动。161 162 天津市自来水集团总工程师何文杰说，为保障各水厂切换平稳过渡、安全运行，引江水进入天津后，将在各家水厂分阶段、分步骤实施水源切换，其中，位于滨海新区的津滨水厂目前已经率先切换，该水厂覆盖的天津市东丽区、津南区及滨海新区部分区域的市民从当前开始最先喝上长江水。至2015年春节前后，天津中心城区广大市民都将喝上长江水。163 164 “南水北调中线工程建成通水后，天津将有引滦入津和南水北调两条水源，水资源短缺的局面得到缓解。”天津市南水北调办公室主任朱芳清说，“新的供水格局，为经济社会可持续发展、生态文明建设和群众生活水平的提高，提供更可靠的水资源保障。”165 166 天津是资源型严重缺水地区，水资源短缺、单一、脆弱问题突出，始终是经济社会发展的制约性因素。天津也是南水北调中线工程的主要受水区之一。167 168 记者了解到，2006年6月，天津市在中线工程沿线各省市中率先启动了南水北调配套工程建设，截至目前，直接承接引江水的天津中心城区供水工程、尔王庄水库至津滨水厂供水工程、滨海新区供水工程、西河原水枢纽泵站、西河原水枢纽泵站至宜兴埠站原水管线联通工程等5个骨干输配水工程已全部建成，累计完成投资79亿元，并如期迎来了清澈的长江水。169 170 朱芳清介绍，引江之水来之不易，天津市将加强水资源管理，落实最严格的新华网天津12月27日电 27日上午，长江水抵达南水北调中线天津市内配套工程的第一站——曹庄泵站，流向天津滨海新区的津滨水厂，并从这里进入天津的千家万户。171 172 记者站在泵站水闸处看到，尽管天津室外温度很低，但经过千里跋涉的长江水水面并无结冰，平缓流动。173 174 天津市自来水集团总工程师何文杰说，为保障各水厂切换平稳过渡、安全运行，引江水进入天津后，将在各家水厂分阶段、分步骤实施水源切换，其中，位于滨海新区的津滨水厂目前已经率先切换，该水厂覆盖的天津市东丽区、津南区及滨海新区部分区域的市民从当前开始最先喝上长江水。至2015年春节前后，天津中心城区广大市民都将喝上长江水。175 176 “南水北调中线工程建成通水后，天津将有引滦入津和南水北调两条水源，水资源短缺的局面得到缓解。”天津市南水北调办公室主任朱芳清说，“新的供水格局，为经济社会可持续发展、生态文明建设和群众生活水平的提高，提供更可靠的水资源保障。”177 178 天津是资源型严重缺水地区，水资源短缺、单一、脆弱问题突出，始终是经济社会发展的制约性因素。天津也是南水北调中线工程的主要受水区之一。179 180 记者了解到，2006年6月，天津市在中线工程沿线各省市中率先启动了南水北调配套工程建设，截至目前，直接承接引江水的天津中心城区供水工程、尔王庄水库至津滨水厂供水工程、滨海新区供水工程、西河原水枢纽泵站、西河原水枢纽泵站至宜兴埠站原水管线联通工程等5个骨干输配水工程已全部建成，累计完成投资79亿元，并如期迎来了清澈的长江水。181 182 朱芳清介绍，引江之水来之不易，天津市将加强水资源管理，落实最严格的水资源管理制度，合理配置水资源，同时强化水生态保护，高效、节约用水，把水用好、用活、用足，让宝贵的引江水促进发展、提升环境、改善民生。水资源管理制度，合理配置水资源，同时强化水生态保护，高效、节约用水，把水用好、用活、用足，让宝贵的引江水促进发展、提升环境、改善民生。183 </div>184 </div>185 </div>186 187 </body>188 </html>
onmousewheel&DOMMouseScroll自定义滚动条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。