为什么别人网页的滚动条辣么好看~
其实我们一样可以很个性。。^_^
效果实现:(附效果图)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> body, html { margin: 0; width: 100%; height: 100%; } ul, li { margin: 0; padding: 0; list-style: none; } .scrollBox { width: 100%; height: 100%; overflow: hidden; padding-right: 15px; box-sizing: border-box; } .cBox { width: 100%; /*float: left;*/ } .sBox { width: 15px; height: 100%; /*float: right;*/ position: absolute; top: 0; right: 0; background-image: linear-gradient(rgba(188,57,75,0.8) 0%,rgba(38,70,173,0.5) 100%); box-shadow: 0 0 15px 3px rgba(0,0,0,0.5) inset; } li { width: 100%; } img { display: block; width: 100%; } .tool { width: 100%; border-radius:7px; position: relative; left: 0px; top: 0px; text-align: center; /*background-color: skyblue;*/ background-image: linear-gradient(skyblue 0%,pink 100%); box-shadow: 0 0 20px 2px #FFFF99 inset; cursor: pointer; } </style> <script type="text/javascript"> window.onload = function() { //获取触发滚动事件的元素 var scrollBox = document.querySelector('.scrollBox'); //创建滚动结构: //-------------- //获取和子元素 var cBox = scrollBox.querySelector('.cBox'); var sBox = scrollBox.querySelector('.sBox'); var tool = scrollBox.querySelector('.tool'); initWheel(); //滚动条初始化 function initWheel() { //计算滚动条高度 var H1 = cBox.offsetHeight; var H2 = scrollBox.clientHeight; var h1 = sBox.offsetHeight; //求出h2的高度 var h2 = H2 / H1 * h1; // console.log(h2) tool.style.height = h2 + 'px'; tool.style.lineHeight = h2 + 'px'; } var site = tool.offsetTop; var speed = 10; wheel({ obj: scrollBox, up: function() { site -= speed; //边界处理 if(site <= 0) { site = 0; } tool.style.top = site + 'px'; cBox.style.marginTop = -(cBox.offsetHeight * (site / sBox.clientHeight)) + 'px'; }, down: function() { site += speed; //边界处理 if(site >= sBox.clientHeight - tool.offsetHeight) { site = sBox.clientHeight - tool.offsetHeight; } tool.style.top = site + 'px'; cBox.style.marginTop = -(cBox.offsetHeight * (site / sBox.clientHeight)) + 'px'; } }); //拖动滚动条 tool.onmousedown = function(ev){ var ev=ev||event; ev.preventDefault(); var x1 = ev.clientX; var y1 =ev.clientY; document.onmousemove = function(ev){ var ev=ev||event; ev.preventDefault(); var x2 = ev.clientX; var y2 =ev.clientY; var x = Math.abs(x2-x1); var y = y2-y1; //边界处理 var m =site+y; if(m<=0){ m=0; }; if(m>=sBox.clientHeight-tool.offsetHeight){ m=sBox.clientHeight-tool.offsetHeight; }; tool.style.top=m+'px'; cBox.style.marginTop = -cBox.offsetHeight*(m/sBox.clientHeight)+'px'; if(x>200){//x超过滚动条200时取消事件 site = tool.offseetTop;//这里记录变化后的位置 document.onmousemove = null; } } document.onmouseup = function(){ site = tool.offsetTop;//记录变化后的位置 document.onmousemove = null; } } /* * * //滚轮事件方法: * 功能:绑定滚轮事件 * 参数: * option { * * obj: 触发事件的元素 * up: 滚轮向上滚动要执行的函数 * down: 滚轮向下滚动要执行的函数 * * } * * */ function wheel(option) { //自定义错误提示 if(!option) { console.log('错误码10086:参数不正确'); return false; } var opt = { obj: option.obj || documen, up: option.up || null, down: option.down || null, }; opt.obj.onmousewheel = function(ev) { var ev = ev || event; if(ev.wheelDelta < 0) { console.log('向下') opt.down && opt.down(); } if(ev.wheelDelta > 0) { console.log('向上') opt.up && opt.up(); } } opt.obj.addEventListener('DOMMouseScroll', function(ev) { var ev = ev || event; // console.log(ev.detail); if(ev.detail > 0) { // console.log('向下'); opt.down && opt.down(); } if(ev.detail < 0) { // console.log('向上'); opt.up && opt.up(); } }); } } </script> </head> <body> <section class="scrollBox"> <div class="cBox"> <ul> <li> <img src="img/1.jpg" alt="" /> </li> <li> <img src="img/2.jpg" alt="" /> </li> <li> <img src="img/3.jpg" alt="" /> </li> <li> <img src="img/4.jpg" alt="" /> </li> <li> <img src="img/5.jpg" alt="" /> </li> <li> <img src="img/6.jpg" alt="" /> </li> <li> <img src="img/7.jpg" alt="" /> </li> <li> <img src="img/8.jpg" alt="" /> </li> <li> <img src="img/9.jpg" alt="" /> </li> </ul> </div> <div class="sBox"> <span class="tool glyphicon glyphicon-flash" href="javascript:;"></span> </div> </section> </body> </html>
各位大神有什么好的意见和指导敬请赐教~~