JavaScript自定義瀏覽器滾動條兼容IE、火狐和chrome

時間 2019-12-11

標籤 javascript 自定義瀏覽器滾動條兼容火狐 chrome 欄目 JavaScript 简体版

原文原文鏈接

今天爲你們分享一下我本身製做的瀏覽器滾動條，咱們知道用css來自定義滾動條也是挺好的方式，css雖然可以改變chrome瀏覽器的滾動條樣式能夠自定義，css也可以改變IE瀏覽器滾動條的顏色。可是css只能是改變IE瀏覽器的顏色，並且CSS不能作到改變火狐瀏覽器的樣式和顏色。因此只能是經過JavaScript來實現了。也有插件能夠作到。我分享一下我本身使用原生JavaScript實現的思路。先上個圖看下效果：javascript

JavaScript實現的思路就是模擬瀏覽器自身滾動條。我製做的思路是先將整個文檔放在一個容器裏面，而後經過改變容器裏面的div的top值來實現滾動效果佈局以下：css

 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隱藏默認滾動條。java

實現主要思路就是：滑塊移動距離/滑塊滾動範圍=內容滾動距離/內容可滾動高度；滑塊移動距離就是鼠標按下後拖動的距離，chrome

內容可滾動高度就是內容總高度減去可視區域高度。另外，滾動條的總高度就是可視區域的高度，滑塊的高度=可視區域的高度/內容的總高度*可視區域的高度。最後就是判斷瀏覽器是不是火狐。瀏覽器

  1 <script type="text/javascript">
  2 window.onload=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.clientHeight
  8     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.onmousedown=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.onmousemove=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.onmouseup=function (){
 47             document.onmousemove=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>