要自己写一个自定义滚动条加上滚轮事件，之前的没有滚轮事件不完整，今天整理了一个。

1.滚轮事件是不兼容的，firefox中是必需要用事件绑定的添加，用的DOMMouseScroll，当滚动鼠标的时候，只要鼠标滚动的方法就行了，而这通过检测datail的正负号就可以确定

2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta

 <!doctype html>

 <html>

 <head>

     <title>拖拽-加滚轮</title>

     <style>

         .main{ width: 300px; height: 400px; background: #ccc; margin: 10px auto;overflow: hidden;}

         .main-content{width: 300px; position: relative; height: 400px; overflow: hidden;}

         .main-content-c{width: 280px; background: #0F9932; position: absolute; top: 0;}

         .target{width: 20px; background: #eee;height: 400px; position: absolute; top: 0;right: 0;}

         .bar{width: 20px;min-height: 10px; background: #333;border-radius: 10px; position: absolute; top: 0;}

     </style>

     <script>

         window.onload= function(){

             var oContent = document.getElementById("content");

             var oTxt = getByClass(oContent,"main-content-c")[0];

             var oTarg = getByClass(oContent,"target")[0];

             var oBar = getByClass(oContent,"bar")[0];

             oBar.style.height = oTarg.offsetHeight*(oContent.offsetHeight/oTxt.offsetHeight)+'px';

             oBar.onmousedown = function(ev){

                 var oEvent = ev || event;

                 var disY = oEvent.clientY - oBar.offsetTop;

                 document.onmousemove = function(ev){

                     var oEvent = ev || event;

                     var t = oEvent.clientY - disY;

                     setPos(t);

                 }

                 document.onmouseup = function(){

                     document.onmousemove = null;

                     document.onmouseup = null;

                    oBar.releaseCapture && oBar.releaseCapture();

                 }

                 oBar.setCapture && oBar.setCapture();

                 oEvent.preventDefault && oEvent.preventDefault();

                 return false;

             }

             function setPos(t){

                 if(t<0){

                     t =0;

                 }else if(t>oTarg.offsetHeight-oBar.offsetHeight){

                     t = oTarg.offsetHeight-oBar.offsetHeight;

                 }

                 oBar.style.top = t+'px';

                 var scale = t/(oTarg.offsetHeight-oBar.offsetHeight);

                 oTxt.style.top = -scale*(oTxt.offsetHeight-oContent.offsetHeight)+'px';

             }

             addMouseWheel(oContent,function(down){

                 var t = oBar.offsetTop;

                 if(down){

                     t +=10;

                 }else{

                     t -=10;

                 }

                 setPos(t);

             });

         }

         function getByClass(oParent,sClass){

             if(oParent.getElementsByClassName){

                 return oParent.getElementsByClassName(sClass);

             }

             var aEle = oParent.getElementsByTagName("*");

             var aRes = [];

             var reg = new RegExp('\\b'+sClass+'\\b');

             for(var i=0;i<aEle.length;i++){

                 if(reg.test(aEle[i].className)){

                     aRes.push(aEle[i]);

                 }

             }

             return aEle;

         }

         function addMouseWheel(obj,fn){

             function fnWhell(ev){

                 var oEvent = ev || event;

                 var bDown = false;

                 bDown = oEvent.wheelDelta ? oEvent.wheelDelta<0 : oEvent.detail>0;

                 fn && fn(bDown,oEvent);

                 oEvent.preventDefault && oEvent.preventDefault();

                 return false;

             }

             if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1){

                 obj.addEventListener("DOMMouseScroll",fnWhell,false);

             }else{

                 addEvent(obj,'mousewheel',fnWhell);

             }

         }

         function addEvent(obj,sEv,fn){

             if(obj.addEventListener){

                 obj.addEventListener(sEv,fn,false);

             }else{

                 obj.attachEvent('on'+sEv,fn);

             }

         }

     </script>

 </head>

 <body>

 <div class="main">

     <div class="main-content" id="content">

         <div class="main-content-c">

             正当我伸伸懒腰，打算上个厕所的时候，突然想到一件事情：如果模块越来越多，那么多文件都要分开加载？那岂不严重影响性能！？（啥，你不知道为啥？）

             要压缩合并JavaScript呀！于是，我强忍住那股液体，开始用YUICompressor来压缩，并手动合并了两个文件。

             这里就不展示结果了，因为很蛋疼，完全对不住我刚才忍住液体的勇气！结果当然是，失败。

             为什么会失败呢？自己想了想，同时打开压缩后的代码一看，才发现原因：

             压缩后之后，require变量变成了a变量。SeaJS是通过require字面来判断模块之间的依赖关系的，所以，require变量不能被简化。

             嗯，SeaJS已经替我们想到了这个问题，于是我们就采用SeaJS提供的方式来合并压缩吧（当然你也可以自己用别的方式压缩）。

             SeaJS在2.0之前，是采用SPM作为压缩合并工具的，到了2.0，改为Grunt.js，SPM变为包管理工具，类似NPM（不知道NPM？Google一下吧）

             自动化不仅是科技带给社会的便利，也是Grunt带给前端的瑞士军刀。使用Grunt，可以很方便的定制各种任务，如压缩、合并等。使用Grunt之前，需要安装node环境和grunt工具，Google一下，十分钟后回来。

             ……

             Grunt最核心的就两个部分，package.json、Gruntfile.js。

             a. package.json

             Grunt把一个项目/目录视为一个npm模块，package.json就是用来描述这个模块的信息，包括name、version、author等等。

             这里强调一下，Grunt既然将该目录视为一个模块，那么该模块当然可以依赖其他模块。

             我们看本示例的：

             正当我伸伸懒腰，打算上个厕所的时候，突然想到一件事情：如果模块越来越多，那么多文件都要分开加载？那岂不严重影响性能！？（啥，你不知道为啥？）

             要压缩合并JavaScript呀！于是，我强忍住那股液体，开始用YUICompressor来压缩，并手动合并了两个文件。

             这里就不展示结果了，因为很蛋疼，完全对不住我刚才忍住液体的勇气！结果当然是，失败。

             为什么会失败呢？自己想了想，同时打开压缩后的代码一看，才发现原因：

             压缩后之后，require变量变成了a变量。SeaJS是通过require字面来判断模块之间的依赖关系的，所以，require变量不能被简化。

             嗯，SeaJS已经替我们想到了这个问题，于是我们就采用SeaJS提供的方式来合并压缩吧（当然你也可以自己用别的方式压缩）。

             SeaJS在2.0之前，是采用SPM作为压缩合并工具的，到了2.0，改为Grunt.js，SPM变为包管理工具，类似NPM（不知道NPM？Google一下吧）

             自动化不仅是科技带给社会的便利，也是Grunt带给前端的瑞士军刀。使用Grunt，可以很方便的定制各种任务，如压缩、合并等。使用Grunt之前，需要安装node环境和grunt工具，Google一下，十分钟后回来。

             ……

             Grunt最核心的就两个部分，package.json、Gruntfile.js。

             a. package.json

             Grunt把一个项目/目录视为一个npm模块，package.json就是用来描述这个模块的信息，包括name、version、author等等。

             这里强调一下，Grunt既然将该目录视为一个模块，那么该模块当然可以依赖其他模块。

             我们看本示例的：

         </div>

         <div class="target">

             <div class="bar"></div>

         </div>

     </div>

 </div>

 </body>

 </html>

javascript 学习之自定义滚动条加滚轮事件的更多相关文章

  1. JavaScript学习笔记- 自定义滚动条插件

    此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...

  2. JavaScript学习笔记-自定义滚动条

    这是一个基本实现思路,如果有新手和我一样没什么事,喜欢瞎研究话,可以参考下. 一.Html <div class="scroll_con"> <div class ...

  3. JavaScript学习日志（六）：事件

    这篇随笔,深恶痛绝,敲到快结束的时候,凌晨00:19,突然闪退,也不知道是Mac的原因还是chrome的原因,重新打开的时候,以为自动保存有效果,心想没关系,结果他么的只保存了四分之一,WTF?!!! ...

  4. js 页面无滚动条添加滚轮事件

    当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault( ...

  5. JAVAscript学习笔记 js句柄监听事件 第四节 （原创） 参考js使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. javascript学习之带滚动条的图片

    之前找了好久没有找到,就自已动手写了一个: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  7. JavaScript学习笔记-自定义集合类

    //集合类Set( ES6标准才有的类,目前兼容性较差)//自定义集合类:extend = function (o,p){ //定义一个复制对象属性的类函数 for(var x in p){ o[x] ...

  8. javascript学习笔记（七）：事件详解

    HTML事件处理 <!DOCTYPE html> <html> <head lang="en"> <meta chaset="U ...

  9. web前端学习（四）JavaScript学习笔记部分（5）-- 事件流详解

    1.JS事件详解-事件流 1.1.事件流 1.事件流: 描述的是在页面中接受事件的顺序 2.事件冒泡: 由最具体的元素接收,然后逐级上传播至最不具体的节点(文档) 3.事件捕获: 最不具体的节点先接收 ...

随机推荐

  1. spring常见问题

    问题1:提示说:cvc-elt.1: Cannot find the declaration of element 'beans' 解决方法:从网上搜了一些,有的说是因为网络原因访问不到xsd文件,因 ...

  2. 新一代记事本“Notepad++”个性化设置备份

    Notepad++是一套非常有特色的自由软件的纯文字编辑器(许可证:GPL),有完整的中文化接口及支援多国语言撰写的功能(UTF8 技术).它的功能比 Windows 中的 Notepad(记事簿)强 ...

  3. 【Alpha版本】冲刺-Day1

    队伍:606notconnected 会议时间:11月9日 会议总结 张斯巍(433) 今天安排:设计登陆界面背景,图标的大小规定 完成度:90% 明天计划:主界面图标的修改,侧边栏背景设计,个人信息 ...

  4. poj 1170

    很高兴,这道题刚编译成功提交就AC了. 简单的多重背包,标算估计是5.6维动规.其实可以通过6进制压成一维.判定是一个特价方式是否可行只需自己推一下就行了,很简单(对应位上的数目标不小于特价所需条件) ...

  5. BZOJ 1923: [Sdoi2010]外星千足虫

    Description 给出几个异或方程组求解,\(n \leqslant 2000\) Sol 高斯消元. 直接消元就行,遇到自由元就直接输出,同时记录一下用到的最高行数. 复杂度不科学就可以用 b ...

  6. MySQL 5.6 for Windows 解压缩版配置安装

    MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将会安装在C:\P ...

  7. Sql Server 2008服务启动失败，错误17058

    SQL Server (SQLEXPRESS) 服务因 17058 (0x42A2) 服务性错误而停止. 有关更多信息,请参阅在 http://go.microsoft.com/fwlink/even ...

  8. virtualbox之usb设备的分配

    来源:http://www.cnblogs.com/fsjohnhuang/p/3987545.html 首先下载安装virtualbox的扩展包,因为box原本不支持usb设备.www.virtua ...

  9. linux 使用 nvidia 的 gpu

    第一种方法: [Wizard@Wizard ~]$ nvidia-detect kmod-nvidiaOptimus hardware detected: An Intel display contr ...

  10. jqueyr eq get用法

    相信大部份人都会把这2个的用法搞错.仔细查看下API文档就可以知道.eq返回的是一个jquery对象,get返回的是一个html 对象数组.举个例子: <p style="color: ...