拖拽滑块自定义滚动条

  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>

相关阅读:
栈的压入、弹出序列
 HM代码分析--TAppEncoder
HM代码分析--TAppDecoder
包含min函数的栈
 GMOJ 6841. 【2020.11.5提高组模拟】淘淘蓝蓝之树林
 【2020.11.5提高组模拟】总结
 dsu on tree学习总结（树上启发式合并）
GMOJ 6847. 【2020.11.03提高组模拟】通往强者之路
 2020.11.03【NOIP提高A组】模拟
 【2020.11.02提高组模拟】总结
原文地址：https://www.cnblogs.com/fsg6/p/12890105.html