拖拽滑块自定义滚动条
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>
