JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

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

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

 1 <style>2     *{3         margin:0;4         padding:0;5     }6     body{7         overflow:hidden;9     }
10     #box{
11         float:right;
12         top:0;
13         right:0;
14         width:20px;
15         background:#ccc;
16         position:relative;
17     }
18     #drag{
19         position: absolute;
20         top:0
21         left:0;
22         width:20px;
23         background:green;
24     }
25     #content{
28         position:absolute;
29         left: 0;
30     }
31 </style>
32
33
34 <body>
35     <div id="box">
36         <div id="drag"></div>
37     </div>
38     <div id="content">
39         <div style="background:#ccc;width: 100px;">
40             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.
41             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.
42             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.
43             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.
44         <div>
45     </div>
46 </body>

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

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

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

  1 <script type="text/javascript">2 window.οnlοad=function(){3     var oBox=document.getElementById('box');4     var oDrag=document.getElementById('drag');5     var content=document.getElementById('content');6     var viewHeight=document.documentElement.clientHeight;7     var conHeight=content.clientHeight8     oBox.style.height=viewHeight+'px';9     oDrag.style.height=viewHeight/conHeight*viewHeight+'px';10 11     window.onresize = function(){12         viewHeight=document.documentElement.clientHeight;13         oBox.style.height=viewHeight+'px';14         oDrag.style.height=viewHeight/conHeight*viewHeight+'px';15 16         oDrag.style.top=-content.offsetTop/(content.clientHeight-viewHeight)*(oBox.clientHeight-oDrag.clientHeight)+'px';17         18     }19 20     oDrag.οnmοusedοwn=function (ev){21         //阻止默认事件22         var e=ev||window.event;23         if (e.preventDefault) {24             e.preventDefault();25         } else{26             e.returnValue=false;27         };28          //e.clientY鼠标当前坐标29         var downY=e.clientY-oDrag.offsetTop;30        31         document.οnmοusemοve=function (ev){32             var e=ev||window.event;33             var top=e.clientY-downY;34             if (top<=0) {35                 top=0;36             };37             if (top>=oBox.clientHeight-oDrag.clientHeight) {38                 top=oBox.clientHeight-oDrag.clientHeight;39             };40             var scale=top/(oBox.clientHeight-oDrag.clientHeight);41             var contentY=scale*(content.clientHeight-viewHeight);42             oDrag.style.top=top+'px';43             content.style.top=-contentY+'px';44             45         }46         document.οnmοuseup=function (){47             document.οnmοusemοve=null;48         }49     }50     var str=window.navigator.userAgent.toLowerCase();51     //火狐浏览器52     if (str.indexOf('firefox')!=-1){53          document.addEventListener('DOMMouseScroll',function (e){54             e.preventDefault();//阻止窗口默认的滚动事件55             if (e.detail<0) {56                 var scrollHei=content.offsetTop+25;57                 if (scrollHei>=0) {58                     scrollHei=0;59                 };60                 if (scrollHei<=-(content.clientHeight-viewHeight)) {61                     scrollHei=-(content.clientHeight-viewHeight);62                 };63                 var scale=scrollHei/(content.clientHeight-viewHeight);64                 var top=scale*(oBox.clientHeight-oDrag.clientHeight);65                 content.style.top=scrollHei+'px';66                 oDrag.style.top=-top+'px';67             }68             if (e.detail>0) {69                 var scrollHei=content.offsetTop-25;70                 if (scrollHei>=0) {71                     scrollHei=0;72                 };73                 if (scrollHei<=-(content.clientHeight-viewHeight)) {74                     scrollHei=-(content.clientHeight-viewHeight);75                 };76                 var scale=scrollHei/(content.clientHeight-viewHeight);77                 var top=scale*(oBox.clientHeight-oDrag.clientHeight);78                 content.style.top=scrollHei+'px';79                 oDrag.style.top=-top+'px';80             };81         },false);82     }83     else{//非火狐浏览器84         document.onmousewheel=function (ev){85             var e=ev||window.event;86             if (e.preventDefault) {87                 e.preventDefault();88             } else{89                 e.returnValue=false;90             };91             if (e.wheelDelta>0) {92                 var scrollHei=content.offsetTop+25;93                 if (scrollHei>=0) {94                     scrollHei=0;95                 };96                 if (scrollHei<=-(content.clientHeight-viewHeight)) {97                     scrollHei=-(content.clientHeight-viewHeight);98                 };99                 var scale=scrollHei/(content.clientHeight-viewHeight);
100                 var top=scale*(oBox.clientHeight-oDrag.clientHeight);
101                 content.style.top=scrollHei+'px';
102                 oDrag.style.top=-top+'px';
103             };
104             if (e.wheelDelta<0) {
105                 var scrollHei=content.offsetTop-25;
106                 if (scrollHei>=0) {
107                     scrollHei=0;
108                 };
109                 if (scrollHei<=-(content.clientHeight-viewHeight)) {
110                     scrollHei=-(content.clientHeight-viewHeight);
111                 };
112                 var scale=scrollHei/(content.clientHeight-viewHeight);
113                 var top=scale*(oBox.clientHeight-oDrag.clientHeight);
114                 content.style.top=scrollHei+'px';
115                 oDrag.style.top=-top+'px';
116             };
117         }
118     }
119
120 }
121 </script>

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

转载于:https://www.cnblogs.com/libin-1/p/6251852.html

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome相关推荐

自定义浏览器滚动条样式（兼容chrome和firefox）
大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我,解锁前端成长新姿势. 以下正文: 问题描述浏览器默认的滚动条样式太丑了,而且不同的浏览器下滚动条的样式也不一样,为了美观和统一,必 ...
自定义浏览器滚动条的样式，详细讲解
CSS3自定义滚动条样式 -webkit-scrollbar 有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域, ...
jQuery——自定义浏览器滚动条，改变滚动条样式。实现滚动条效果
自定义浏览器滚动条,并实现滚动条功能废话少说,直接上代码: HTML <div class="scroll-box" onscroll="onScroll()&q ...
自定义浏览器滚动条的样式
自定义IE浏览器滚动条样式追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5.5).下面列出了多个版本的支持性况: 滚动条样式支持情况支持浏览器版本可否继承 ...
自定义浏览器滚动条样式
转载自:https://www.lyblog.net/detail/314.html 自定义IE浏览器滚动条样式追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5. ...
自定义浏览器滚动条的样式，打造属于你的滚动条风格
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chro ...
JavaScript——获取浏览器滚动条(ScrollBar)宽度
问题描述不同浏览器的滚动条宽度不相同,需要动态获取浏览器滚动条宽度. 问题分析 screen.width屏幕分辨率宽度 document.body.scrollWidth 页面完整宽度 docume ...
火狐浏览器滚动条兼容问题
在日常开发中,我们经常会用到 overflow: scroll; 但浏览器自带的默认滚动条很难看,因此我们会需要美化它方法一:自定义美化谷歌 chrome 浏览器美化滚动条方法:(网上有很多种美化 ...
自定义浏览器css,CSS自定义浏览器滚动条样式
前言最近在使用Chrome浏览器访问QQ会员的官网时候发现网站的浏览器默认侧边滚动栏变成了如下图所示的样式,后来上网去查询了一下,然后得知该样式是可以通过CSS来设计的,于是就是自己捣鼓了一下. / ...

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome相关推荐

最新文章

热门文章

JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome相关推荐

最新文章

热门文章

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome相关推荐