拖拽滑塊自定義滾動條

本文轉載自查看原文 2020-05-14 17:26 589 Javascript

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         /*禁止瀏覽器滾動條*/
 12         html,body{
 13             width: 100%;
 14             height: 100%;
 15             overflow: hidden;
 16         }
 17         
 18         
 19         #wrap{
 20             width: 100%;
 21             height: 100%;
 22             overflow: hidden;
 23             background: pink;
 24             position: relative;
 25         }
 26         /* 內容區內容設置 */
 27      #wrap .content{
 28             position: absolute;
 29             left:0;
 30             top:0;
 31         }
 32         
 33         /* //滑槽設置 */
 34         #wrap .scrollBar{
 35             width: 30px;
 36             height: 100%;
 37             position: absolute;
 38             right: 0;
 39             top: 0;
 40             background: skyblue;
 41             border-left: 1px solid orange;
 42             border-right: 1px solid orange;
 43         }
 44         
 45         /* //滑塊設置 */
 46         #wrap .scrollBar .scrollIn{
 47             position: absolute;
 48             top:0;
 49             left:50%;
 50             transform: translateX(-50%);
 51             width: 26px;
 52             /* 不用寫死滑塊高度 */
 53             /*height: 100px;*/
 54             background: coral;
 55         }
 56     </style>
 57 </head>
 58 <body>
 59 <div id="wrap">
 60     <div class="content"></div>
 61     <!--自定義滾動條結構-->
 62     <!--滑槽-->
 63     <div class="scrollBar">
 64         <!--滑塊-->
 65         <div class="scrollIn">
 66 
 67         </div>
 68     </div>
 69 
 70 </div>
 71 
 72 <!-- 思路；1，滑塊的寬度動態設置  73 2.內容區的滾動距離（內容的top值）,往頁面向上走，是負值 -->
 74 <script type="text/javascript">
 75     window.onload = function () {
 76         //    拖拽目標
 77         var box = document.querySelector('.scrollIn');
 78         var content = document.querySelector('.content'); 
 79 //        通過循環創建內容
 80         for (var i = 0; i < 800; i++) {
 81             content.innerHTML += i + '<br>';
 82         }
 83 //       動態設置滑塊高度，不需要在css樣式中設置
 84 //       自定義滾動條滑塊的萬能比例
 85 //        滑塊的高度  /  滑槽的高度   =   滑槽的高度  /  內容的高度    =   滑塊的滾動距離   /  內容的滾動距離
 86 
 87         // 滑槽的高度  /  內容的高度
 88         var scale = document.documentElement.clientHeight / content.offsetHeight;
 89         //滑塊的高度
 90         box.style.height = document.documentElement.clientHeight * scale + 'px';
 91         box.onmousedown = function (event) {
 92             event = event || window.event;
 93             var eleY = box.offsetTop;//元素起始top
 94             var startY = event.clientY;//鼠標按下的y坐標
 95             box.setCapture && box.setCapture();//  低版本開啟全局捕獲兼容寫法
 96             document.onmousemove = function (event) {
 97                 event = event || window.event;
 98                 var endY = event.clientY;//鼠標結束的位置Y
 99                 var disY = endY - startY;//縱向鼠標距離差
100                 var lastY = eleY + disY;//元素最終的top值
101 
102 //              滑塊邊界值判斷
103                 if(lastY > document.documentElement.clientHeight - box.offsetHeight){
104                     lastY = document.documentElement.clientHeight - box.offsetHeight;
105                 }else if(lastY < 0){
106                     lastY = 0;
107                 }
108 //              在滑塊移動的同時  還需要修改內容區域的top值
109                 box.style.top = lastY + 'px';
110 //                scale = lastY / 內容區top值（內容區滾動距離）
111 //                lastY   是當前滑塊滾動的距離
112                 var contentDis = lastY / scale;
113                 //內容區往上走，滑塊往下走
114  content.style.top = -contentDis + 'px'; 115             };
116             document.onmouseup = function () {
117                 document.onmousemove = document.onmouseup = null;
118                 box.releaseCapture && box.releaseCapture();//低版本瀏覽器 釋放全局捕獲
119             };
120 //      阻止瀏覽器默認行為
121             return false;
122         }
123     }
124 </script>
125 </body>
126 </html>

鼠標滑輪滾動，控制滑塊拖拽（進階版）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         /*禁止瀏覽器滾動條*/
 12         html,body{
 13             width: 100%;
 14             height: 100%;
 15             overflow: hidden;
 16         }
 17         #wrap{
 18             width: 100%;
 19             height: 100%;
 20             overflow: hidden;
 21             background: pink;
 22             position: relative;
 23         }
 24         #wrap .content{
 25             position: absolute;
 26             left:0;
 27             top:0;
 28         }
 29         #wrap .scrollBar{
 30             width: 30px;
 31             height: 100%;
 32             position: absolute;
 33             right: 0;
 34             top: 0;
 35             background: skyblue;
 36             border-left: 1px solid orange;
 37             border-right: 1px solid orange;
 38         }
 39         #wrap .scrollBar .scrollIn{
 40             position: absolute;
 41             top:0;
 42             left:50%;
 43             transform: translateX(-50%);
 44             width: 26px;
 45             /*height: 100px;*/
 46             background: coral;
 47         }
 48     </style>
 49 </head>
 50 <body>
 51 <div id="wrap">
 52     <div class="content"></div>
 53     <!--自定義滾動條結構-->
 54     <!--滑槽-->
 55     <div class="scrollBar">
 56         <!--滑塊-->
 57         <div class="scrollIn">
 58 
 59         </div>
 60     </div>
 61 
 62 </div>
 63 <script type="text/javascript">
 64     window.onload = function () {
 65         //    拖拽目標
 66         var box = document.querySelector('.scrollIn');
 67         var content = document.querySelector('.content');
 68 //        通過循環創建內容
 69         for (var i = 0; i < 200; i++) {
 70             content.innerHTML += i + '<br>';
 71         }
 72 //       動態設置滑塊高度
 73 //       自定義滾動條滑塊的萬能比例
 74 //        滑塊的高度  /  滑槽的高度   =   滑槽的高度  /  內容的高度    =   滑塊的滾動距離   /  內容的滾動距離
 75         var scale = document.documentElement.clientHeight / content.offsetHeight;
 76         box.style.height = document.documentElement.clientHeight * scale + 'px';
 77         box.onmousedown = function (event) {
 78             event = event || window.event;
 79             var eleY = box.offsetTop;//元素起始top
 80             var startY = event.clientY;//鼠標按下的y坐標
 81             box.setCapture && box.setCapture();//  低版本開啟全局捕獲兼容寫法
 82             document.onmousemove = function (event) {
 83                 event = event || window.event;
 84                 var endY = event.clientY;//鼠標結束的位置Y
 85                 var disY = endY - startY;//縱向鼠標距離差
 86                 var lastY = eleY + disY;//元素最終的top值
 87 
 88 //              滑塊邊界值判斷
 89                 if(lastY > document.documentElement.clientHeight - box.offsetHeight){
 90                     lastY = document.documentElement.clientHeight - box.offsetHeight;
 91                 }else if(lastY < 0){
 92                     lastY = 0;
 93                 }
 94 //              在滑塊移動的同時  還需要修改內容區域的top值
 95                 box.style.top = lastY + 'px';
 96 //                scale = lastY / 內容區top值（內容區滾動距離）
 97 //                lastY   是當前滑塊滾動的距離
 98 //                 lastY   /  contentDis  =  scale
 99 //                  10     /     5        =   2
100                 var contentDis = lastY / scale;
101                 content.style.top = -contentDis + 'px';
102             };
103             document.onmouseup = function () {
104                 document.onmousemove = document.onmouseup = null;
105                 box.releaseCapture && box.releaseCapture();//低版本瀏覽器 釋放全局捕獲
106             };
107 //      阻止瀏覽器默認行為
108             return false;
109         }
110 //        滾輪邏輯


111         document.addEventListener('mousewheel',scrollMove); //谷歌，ie瀏覽器綁定
112         document.addEventListener('DOMMousescroll',scrollMove); //火狐瀏覽器綁定
113         var flag = true;
114         function scrollMove(event) {
115 //          console.log('我是滾輪')
116             event = event || window.event;
117 //            判斷瀏覽器
118             if(event.wheelDelta){
119 //              ie/chrome
120                 if(event.wheelDelta > 0){
121 //                  上
122                     flag = true;
123                 }else{
124                     flag = false;
125                 }
126             }else if (event.detail){
127 //                firfox
128                 if(event.detail < 0){
129 //                  上
130                     flag = true;
131                 }else {
132 //                    下
133                     flag = false;
134                 }
135             }
136 
137 //            到這flag這個變量已經明確的幫我記錄下 滾動的方向  開始不同方向的邏輯
138 //            if else分支語句 在實際開發當中 使用頻率還是高的
139 //            if語句的結構清晰  易讀   可以處理復雜的邏輯
140 //            三元表達式的使用場景  一行代碼  嵌套盡量不要超過3層   不易讀    性能確實會比if好一些
141             if(flag){
142 //              滾輪向上的邏輯
143 //                滾輪往上，滑塊應該從當前位置向上  內容就應該向下
144 //                滑塊的位置向上    那么我的top就應該減小
145                 var scrollDis = box.offsetTop -10;
146                 
147                 //滑塊對於頁面頂部距離的判斷
148                 if(scrollDis < 0){
149                   scrollDis = 0;
150                 }
151                 //滑塊的top
152                 box.style.top = scrollDis + 'px';
153 //                內容的偏移
154                 var contentDis = scrollDis / scale;
155                 //內容區的top
156                 content.style.top = -contentDis + 'px';
157             }else{
158 //              滾輪向下的邏輯
159 //               滾輪向下，滑塊應該從當前位置向下 內容就應該向上
160 //                滑塊的位置向下    那么我的top就應該增加
161                 var scrollDis = box.offsetTop + 10;
162                 if(scrollDis > document.documentElement.clientHeight - box.offsetHeight){
163                   scrollDis = document.documentElement.clientHeight - box.offsetHeight;
164                 }
165                 box.style.top = scrollDis + 'px';
166 //                內容的偏移
167 //                content的top最大值為0     只要動了滾動條 就一定是負值
168 //                如果搞不定 去瀏覽器檢查工具里邊 自己玩一會 就明白了   操作一下content的top
169                 var contentDis = scrollDis / scale;
170                 //內容區的top
171                 content.style.top = -contentDis + 'px';
172 
173             }
174 
175 
176         }
177 
178 
179 
180     }
181 </script>
182 </body>
183 </html>

鼠標滑輪滾動，控制滑塊拖拽（進階優化版）

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11         /*禁止瀏覽器滾動條*/
 12         html,body{
 13             width: 100%;
 14             height: 100%;
 15             overflow: hidden;
 16         }
 17         #wrap{
 18             width: 100%;
 19             height: 100%;
 20             overflow: hidden;
 21             background: pink;
 22             position: relative;
 23         }
 24         #wrap .content{
 25             position: absolute;
 26             left:0;
 27             top:0;
 28         }
 29         #wrap .scrollBar{
 30             width: 30px;
 31             height: 100%;
 32             position: absolute;
 33             right: 0;
 34             top: 0;
 35             background: skyblue;
 36             border-left: 1px solid orange;
 37             border-right: 1px solid orange;
 38         }
 39         #wrap .scrollBar .scrollIn{
 40             position: absolute;
 41             top:0;
 42             left:50%;
 43             transform: translateX(-50%);
 44             width: 26px;
 45             /*height: 100px;*/
 46             background: coral;
 47         }
 48     </style>
 49 </head>
 50 <body>
 51 <div id="wrap">
 52     <div class="content"></div>
 53     <!--自定義滾動條結構-->
 54     <!--滑槽-->
 55     <div class="scrollBar">
 56         <!--滑塊-->
 57         <div class="scrollIn">
 58 
 59         </div>
 60     </div>
 61 
 62 </div>
 63 <script type="text/javascript">
 64     window.onload = function () {
 65         //    拖拽目標
 66         var box = document.querySelector('.scrollIn');
 67         var content = document.querySelector('.content');
 68 //        通過循環創建內容
 69         for (var i = 0; i < 200; i++) {
 70             content.innerHTML += i + '<br>';
 71         }
 72 //       動態設置滑塊高度
 73 //       自定義滾動條滑塊的萬能比例
 74 //        滑塊的高度  /  滑槽的高度   =   滑槽的高度  /  內容的高度    =   滑塊的滾動距離   /  內容的滾動距離
 75         var scale = document.documentElement.clientHeight / content.offsetHeight;
 76         box.style.height = document.documentElement.clientHeight * scale + 'px';
 77         box.onmousedown = function (event) {
 78             event = event || window.event;
 79             var eleY = box.offsetTop;//元素起始top
 80             var startY = event.clientY;//鼠標按下的y坐標
 81             box.setCapture && box.setCapture();//  低版本開啟全局捕獲兼容寫法
 82             document.onmousemove = function (event) {
 83                 event = event || window.event;
 84                 var endY = event.clientY;//鼠標結束的位置Y
 85                 var disY = endY - startY;//縱向鼠標距離差
 86                 var lastY = eleY + disY;//元素最終的top值
 87 
 88 //              滑塊邊界值判斷
 89                 if(lastY > document.documentElement.clientHeight - box.offsetHeight){
 90                     lastY = document.documentElement.clientHeight - box.offsetHeight;
 91                 }else if(lastY < 0){
 92                     lastY = 0;
 93                 }
 94 //              在滑塊移動的同時  還需要修改內容區域的top值
 95                 box.style.top = lastY + 'px';
 96 //                scale = lastY / 內容區top值（內容區滾動距離）
 97 //                lastY   是當前滑塊滾動的距離
 98 //                 lastY   /  contentDis  =  scale
 99 //                  10     /     5        =   2
100                 var contentDis = lastY / scale;
101                 content.style.top = -contentDis + 'px';
102             };
103             document.onmouseup = function () {
104                 document.onmousemove = document.onmouseup = null;
105                 box.releaseCapture && box.releaseCapture();//低版本瀏覽器 釋放全局捕獲
106             };
107 //      阻止瀏覽器默認行為
108             return false;
109         }
110 //        滾輪邏輯
111         document.addEventListener('mousewheel',scrollMove);
112         document.addEventListener('DOMMousescroll',scrollMove);
113         var speed = 0;
114         function scrollMove(event) {
115 //          console.log('我是滾輪')
116             event = event || window.event;
117 //            判斷瀏覽器
118             if(event.wheelDelta){
119 //              ie/chrome
120                 if(event.wheelDelta > 0){
121 //                  上
122                     speed = -10;
123                 }else{
124                     speed = 10;
125                 }
126             }else if (event.detail){
127 //                firfox
128                 if(event.detail < 0){
129 //                  上
130                     speed = -10;
131                 }else {
132 //                    下
133                     speed = 10;
134                 }
135             }
136 
137             var scrollDis = box.offsetTop + speed;
138             if(scrollDis > document.documentElement.clientHeight - box.offsetHeight){
139                 scrollDis = document.documentElement.clientHeight - box.offsetHeight;
140             }else if(scrollDis < 0){
141                 scrollDis = 0;
142             }
143             box.style.top = scrollDis + 'px';
144             var contentDis = scrollDis / scale;
145             content.style.top = -contentDis + 'px';
146         }
147 
148     }
149 </script>
150 </body>
151 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 qml: 自定義滾動條；自定義滾動條mCustomScrollbar 自定義滾動條原理如何自定義滾動條？ vue自定義滾動條自定義樣式滾動條自定義滾動條原理 css自定義滾動條自定義滾動條mCustomScrollbar JavaScript自定義滾動條