今天为大家分享一下我自己制作的浏览器滚动条，我们知道用css来自定义滚动条也是挺好的方式，css虽然能够改变chrome浏览器的滚动条样式可以自定义，css也能够改变IE浏览器滚动条的颜色。但是css只能是改变IE浏览器的颜色，而且CSS不能做到改变火狐浏览器的样式和颜色。所以只能是通过JavaScript来实现了。也有插件可以做到。我分享一下我自己使用原生JavaScript实现的思路。先上个图看下效果：

JavaScript实现的思路就是模拟浏览器自身滚动条。我制作的思路是先将整个文档放在一个容器里面，然后通过改变容器里面的div的top值来实现滚动效果布局如下：

 <style>

     *{

         margin:0;

         padding:0;

     }

     body{

         overflow:hidden;

     }

     #box{

         float:right;

         top:0;

         right:0;

         width:20px;

         background:#ccc;

         position:relative;

     }

     #drag{

         position: absolute;

         top:0

         left:0;

         width:20px;

         background:green;

     }

     #content{

         position:absolute;

         left: 0;

     }

 </style>

 <body>

     <div id="box">

         <div id="drag"></div>

     </div>

     <div id="content">

         <div style="background:#ccc;width: 100px;">

             Although many people talk about the super performance of quantum computing, such as one second to complete the current supercomputer computing tasks for several years, but so far did not create a true sense of the quantum computer, one of the very important reason is that, The state of particles used in quantum computation is not stable, and any electromagnetic or physical interference can easily disrupt its work. The state of the Mayola fermion is very stable, which makes it a perfect choice for making quantum computers. Six months ago in the laboratory of Shanghai Jiaotong University, Jia Jinfeng successfully captured it.

             Speaking of the scene, Jia Jinfeng said: "In fact, I started to hear the Mayolana fermions, I think this thing may not be done 20 years out.

             Using a special material preparation method, Jia Jinfeng's research team has grown topological insulators on the superconductors with thickness of 5 nanometers. The topological superconductor materials are prepared and finally the Mayolana fermions are found at the interface of the topological superconductors. The mysterious particles were captured 80 years, but also let Jia Jinfeng more firm with its confidence in the manufacture of quantum computers.

             Speaking of the future of the plan, Jia Jinfeng said: "I hope to within a few years to do the topological quantum bit!" (Before) the world has not, so if we cut into this from the point, we are the same with the world The starting line, for our country, this is able to catch up with the footsteps of quantum computing, a starting point.

         <div>

     </div>

 </body>

先定义滑块和滑动条，然后在定义一个装内容的盒子，布局很简单，body的 overflow设置成hidden隐藏默认滚动条。

实现主要思路就是：滑块移动距离/滑块滚动范围=内容滚动距离/内容可滚动高度；滑块移动距离就是鼠标按下后拖动的距离，

内容可滚动高度就是内容总高度减去可视区域高度。另外，滚动条的总高度就是可视区域的高度，滑块的高度=可视区域的高度/内容的总高度*可视区域的高度。最后就是判断浏览器是否是火狐。

 <script type="text/javascript">

 window.onload=function(){

     var oBox=document.getElementById('box');

     var oDrag=document.getElementById('drag');

     var content=document.getElementById('content');

     var viewHeight=document.documentElement.clientHeight;

     var conHeight=content.clientHeight

     oBox.style.height=viewHeight+'px';

     oDrag.style.height=viewHeight/conHeight*viewHeight+'px';

     window.onresize = function(){

         viewHeight=document.documentElement.clientHeight;

         oBox.style.height=viewHeight+'px';

         oDrag.style.height=viewHeight/conHeight*viewHeight+'px';

         oDrag.style.top=-content.offsetTop/(content.clientHeight-viewHeight)*(oBox.clientHeight-oDrag.clientHeight)+'px';

     }

     oDrag.onmousedown=function (ev){

         //阻止默认事件

         var e=ev||window.event;

         if (e.preventDefault) {

             e.preventDefault();

         } else{

             e.returnValue=false;

         };

          //e.clientY鼠标当前坐标

         var downY=e.clientY-oDrag.offsetTop;

         document.onmousemove=function (ev){

             var e=ev||window.event;

             var top=e.clientY-downY;

             if (top<=0) {

                 top=0;

             };

             if (top>=oBox.clientHeight-oDrag.clientHeight) {

                 top=oBox.clientHeight-oDrag.clientHeight;

             };

             var scale=top/(oBox.clientHeight-oDrag.clientHeight);

             var contentY=scale*(content.clientHeight-viewHeight);

             oDrag.style.top=top+'px';

             content.style.top=-contentY+'px';

         }

         document.onmouseup=function (){

             document.onmousemove=null;

         }

     }

     var str=window.navigator.userAgent.toLowerCase();

     //火狐浏览器

     if (str.indexOf('firefox')!=-1){

          document.addEventListener('DOMMouseScroll',function (e){

             e.preventDefault();//阻止窗口默认的滚动事件

             if (e.detail<0) {

                 var scrollHei=content.offsetTop+25;

                 if (scrollHei>=0) {

                     scrollHei=0;

                 };

                 if (scrollHei<=-(content.clientHeight-viewHeight)) {

                     scrollHei=-(content.clientHeight-viewHeight);

                 };

                 var scale=scrollHei/(content.clientHeight-viewHeight);

                 var top=scale*(oBox.clientHeight-oDrag.clientHeight);

                 content.style.top=scrollHei+'px';

                 oDrag.style.top=-top+'px';

             }

             if (e.detail>0) {

                 var scrollHei=content.offsetTop-25;

                 if (scrollHei>=0) {

                     scrollHei=0;

                 };

                 if (scrollHei<=-(content.clientHeight-viewHeight)) {

                     scrollHei=-(content.clientHeight-viewHeight);

                 };

                 var scale=scrollHei/(content.clientHeight-viewHeight);

                 var top=scale*(oBox.clientHeight-oDrag.clientHeight);

                 content.style.top=scrollHei+'px';

                 oDrag.style.top=-top+'px';

             };

         },false);

     }

     else{//非火狐浏览器

         document.onmousewheel=function (ev){

             var e=ev||window.event;

             if (e.preventDefault) {

                 e.preventDefault();

             } else{

                 e.returnValue=false;

             };

             if (e.wheelDelta>0) {

                 var scrollHei=content.offsetTop+25;

                 if (scrollHei>=0) {

                     scrollHei=0;

                 };

                 if (scrollHei<=-(content.clientHeight-viewHeight)) {

                     scrollHei=-(content.clientHeight-viewHeight);

                 };

                 var scale=scrollHei/(content.clientHeight-viewHeight);

                 var top=scale*(oBox.clientHeight-oDrag.clientHeight);

                 content.style.top=scrollHei+'px';

                 oDrag.style.top=-top+'px';

             };

             if (e.wheelDelta<0) {

                 var scrollHei=content.offsetTop-25;

                 if (scrollHei>=0) {

                     scrollHei=0;

                 };

                 if (scrollHei<=-(content.clientHeight-viewHeight)) {

                     scrollHei=-(content.clientHeight-viewHeight);

                 };

                 var scale=scrollHei/(content.clientHeight-viewHeight);

                 var top=scale*(oBox.clientHeight-oDrag.clientHeight);

                 content.style.top=scrollHei+'px';

                 oDrag.style.top=-top+'px';

             };

         }

     }

 }

 </script>

以上就是我自己实现的整个过程，其中也存在不少BUG，比如没有解决浏览器缩放时候的问题。感谢大家的阅读，如有指正的地方欢迎大家指正纠错

JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome的更多相关文章

  1. 自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

    前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chr ...

  2. javascript自定义浏览器右键菜单

    javascript自定义浏览器右键菜单   在书上看到document对象还有一个contextmenu事件,但是不知为什么w3school中找不到这个耶... 利用这个特性写了个浏览器的右键菜单, ...

  3. 总结JavaScript中浏览器的兼容问题

    浅析JavaScript中浏览器的兼容问题 浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断 ...

  4. 网站开发中使用javascript获取浏览器滚动条宽度

    在网站开发中,有时候需要获取浏览器滚动条的宽度,在武汉蚂蹄软件服务中心的技术人员指导之下,我实现了该需求.记录如下: 首先说明一下原理: ①生成一个div,设置滚动条不可见,记录其宽度: ②将上面的d ...

  5. javascript多浏览器的兼容

    一.document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document. ...

  6. CSS3自定义浏览器滚动条样式

    一个完整滚动条右以下部分组成: ::-webkit-scrollbar 滚动条整体部分,常用属性:width,height,background,border: ::-webkit-scrollbar ...

  7. 新版本火狐 ，Chrome不支持showModalDialog解决办法

    平常的网站中,有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,在IE中,我们可以使用showModalDialog来达成,但是chrome早就不支持showModalDialog,最近 ...

  8. javascript自定义滚动条插件，几行代码的事儿

    在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...

  9. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

随机推荐

  1. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. 【原】Android热更新开源项目Tinker源码解析系列之二:资源文件热更新

    上一篇文章介绍了Dex文件的热更新流程,本文将会分析Tinker中对资源文件的热更新流程. 同Dex,资源文件的热更新同样包括三个部分:资源补丁生成,资源补丁合成及资源补丁加载. 本系列将从以下三个方 ...

  3. ifconfig: command not found（CentOS专版，其他的可以参考）

    ifconfig: command not found 查看path配置(echo相当于c中的printf,C#中的Console.WriteLine) echo $PATH 解决方案1:先看看是不是 ...

  4. pt-pmp

    pt-pmp有两方面的作用:一是获取进程的堆栈信息,二是对这些堆栈信息进行汇总. 进程的堆栈信息是利用gdb获取的,所以在获取的过程中,会对mysql服务端的性能有一定的影响. 用官方的话说: Thi ...

  5. sql的那些事（一）

    一.概述 书写sql是我们程序猿在开发中必不可少的技能,优秀的sql语句,执行起来吊炸天,性能杠杠的.差劲的sql,不仅使查询效率降低,维护起来也十分不便.一切都是为了性能,一切都是为了业务,你觉得你 ...

  6. 为什么你SQL Server的数据库文件的Date modified没有变化呢？

    在SQL Server数据库中,数据文件与事务日志文件的修改日期(Date Modified)是会变化的,但是有时候你会发现你的数据文件或日志文件的修改日期(Date Modified)几个月甚至是半 ...

  7. 希尔排序(java)

    时间复杂度为O( n^(3/2) )不是一个稳定的排序算法 如何看一个算法是否稳定:{("scala",12),("python",34),("c++ ...

  8. CodingLife主题更新

    收到反馈说CodingLife主题某些地方显示有问题,于是进行了更新,并且已提交.官方那边正在进行测试,我自己这边测完应该是没问题的,但不知道官方啥时候会进行更新,所以把CSS代码贴出来,有需要的可以 ...

  9. 【完全开源】知乎日报UWP版（上篇）：界面设计、官方API分析

    目录 说明 使用Fiddler分析android版API 部分效果图 关于源码 说明 在做博客园UWP版的时候其实就有做知乎日报的打算了,前段时间一直出差,在酒店里用Fiddler简单的分析了一下An ...

  10. 在 Ubuntu 14.10 中借用 Windows 的字体

    在前一篇随笔中,我详细讨论了字体的分类及用途,也以 Fedora 20 为例,展示了字体配置的思路和方法.我在配置 Fedora 20 系统字体的时候,采用的是一种釜底抽薪的方法,完全抛开了系统原有的 ...