自定义浏览器滚动条，并实现滚动条功能
废话少说，直接上代码：
HTML
<div class="scroll-box" onscroll="onScroll()"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><div id="scrollBar" class="scroll-bar"><div id="scrollBall" class="bar-btn button-3d" onmousedown="start(this)" onmousemove="move(this)"></div> <div class="bar"></div> </div> </div>
CSS：
body {background: #000;}.scroll-box {width: 400px;height: 584px;background: #FFF;padding-right: 25px;margin: 0 auto;position: relative;overflow-y: scroll;-webkit-touch-callout: none;/*系统默认菜单被禁用*/-webkit-user-select: none;/*webkit浏览器*/-khtml-user-select: none;/*早期浏览器*/-moz-user-select: none;/*火狐*/-ms-user-select: none;/*IE10*/}.scroll-box::-webkit-scrollbar {display: none; /* Chrome Safari */}p {text-align: center;line-height: 80px;border-bottom: 1px solid #ccc;}.scroll-bar {width: 25px;height: 100%;position: absolute;right: 0px;top: 0%;}.bar-btn {width: 25px;height: 25px;padding: 0;border-radius: 50%;position: absolute;top: 0;left: 0;background: linear-gradient(0, #20A5EF 0, #C2FFFF 100%);z-index: 2;}.bar {width: 4px;height: 100%;margin: 0 auto;background: #DCDCDC;border-radius: 2px;}
JS:
<script type="text/javascript">var flags = falsevar show = falsevar disX = 0var disY = 0$(document).ready(function(){showBar()});function showBar(){// 判断盒子是否要显示滚动条var box = $('.scroll-box')[0]var cHeight = box.clientHeight;var sHeight = box.scrollHeight;if (cHeight < sHeight) { //超过 $('#scrollBar').css('display', 'block')} else {$('#scrollBar').css('display', 'none')}}function start(odiv){var touchif (event.touches) {touch = event.touches[0];} else {touch = event;}//记录初始位置disX = touch.clientX - odiv.offsetLeft;disY = touch.clientY - odiv.offsetTop;flags= true}function move(odiv){ if(flags){ //获取目标元素var scrollBox = $('.scroll-box')[0]; //获取滚动盒子var scrollHeight = scrollBox.scrollHeight; //滚动盒子滚动条高度var clientHeight = scrollBox.clientHeight; //滚动盒子本身高度var scrollMaxHeight = scrollHeight-clientHeight; //可滚动的最大高度// console.log(e)var touchif (event.touches) {touch = event.touches[0];} else {touch = event;}var pHeight = odiv.parentElement.offsetHeight;//滚动条的总高度var oHeight = odiv.offsetHeight;//滚动条的滑块高度//算出元素相对的位置var left = touch.clientX - disX; var top = touch.clientY - disY;// console.log(odiv)//移动if(top<0){odiv.style.top = 0 + 'px';} else if (top>pHeight-oHeight){odiv.style.top = pHeight-oHeight + 'px';}else {odiv.style.top = top + 'px';}var scrollTop = scrollMaxHeight*top/(pHeight-oHeight)scrollBox.scrollTop = scrollTop;} }function end() {flags= false}// 鼠标滚轮滚动 滚动条跟着滚动function onScroll() {var scrollBox = $('.scroll-box')[0]; //获取滚动盒子var scrollHeight = scrollBox.scrollHeight; //滚动条var clientHeight = scrollBox.clientHeight; //可视区var scrollTop = scrollBox.scrollTop; //距离顶部var scrollMaxHeight = scrollHeight - clientHeight; //可滚动的最大高度var scrollBall = document.getElementById('scrollBall'); //滚动条滑块元素var scrollBar = document.getElementById('scrollBar'); //滚动条滑块元素var pHeight = scrollBar.offsetHeight;//滚动条的总高度var oHeight = scrollBall.offsetHeight;//滚动条的滑块高度var top = scrollTop/scrollMaxHeight*(pHeight-oHeight)scrollBar.style.top = scrollTop+'px';scrollBall.style.top = top+'px';}// 监听鼠标抬起 离开动作window.addEventListener('mouseup',end)//鼠标抬起停止滚动window.addEventListener('mouseleave',end) //离开浏览器窗口停止滚动$('.scroll-box')[0].addEventListener('mouseleave',end) //离开盒子停止滚动</script>
完整代码：
<!DOCTYPE html><html><head><title>滚动条</title></head><script src="/libs/jquery/2.1.4/jquery.min.js"></script><style>body {background: #000;}.scroll-box {width: 400px;height: 584px;background: #FFF;padding-right: 25px;margin: 0 auto;position: relative;overflow-y: scroll;-webkit-touch-callout: none;/*系统默认菜单被禁用*/-webkit-user-select: none;/*webkit浏览器*/-khtml-user-select: none;/*早期浏览器*/-moz-user-select: none;/*火狐*/-ms-user-select: none;/*IE10*/}.scroll-box::-webkit-scrollbar {display: none; /* Chrome Safari */}p {text-align: center;line-height: 80px;border-bottom: 1px solid #ccc;}.scroll-bar {width: 25px;height: 100%;position: absolute;right: 0px;top: 0%;}.bar-btn {width: 25px;height: 25px;padding: 0;border-radius: 50%;position: absolute;top: 0;left: 0;background: linear-gradient(0, #20A5EF 0, #C2FFFF 100%);z-index: 2;}.bar {width: 4px;height: 100%;margin: 0 auto;background: #DCDCDC;border-radius: 2px;}</style><body><div class="scroll-box" onscroll="onScroll()"><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><div id="scrollBar" class="scroll-bar"><div id="scrollBall" class="bar-btn button-3d" onmousedown="start(this)" onmousemove="move(this)"></div> <div class="bar"></div> </div> </div></body><script type="text/javascript">var flags = falsevar show = falsevar disX = 0var disY = 0$(document).ready(function(){showBar()});function showBar(){// 判断盒子是否要显示滚动条var box = $('.scroll-box')[0]var cHeight = box.clientHeight;var sHeight = box.scrollHeight;if (cHeight < sHeight) { //超过 $('#scrollBar').css('display', 'block')} else {$('#scrollBar').css('display', 'none')}}function start(odiv){var touchif (event.touches) {touch = event.touches[0];} else {touch = event;}//记录初始位置disX = touch.clientX - odiv.offsetLeft;disY = touch.clientY - odiv.offsetTop;flags= true}function move(odiv){ if(flags){ //获取目标元素var scrollBox = $('.scroll-box')[0]; //获取滚动盒子var scrollHeight = scrollBox.scrollHeight; //滚动盒子滚动条高度var clientHeight = scrollBox.clientHeight; //滚动盒子本身高度var scrollMaxHeight = scrollHeight-clientHeight; //可滚动的最大高度// console.log(e)var touchif (event.touches) {touch = event.touches[0];} else {touch = event;}var pHeight = odiv.parentElement.offsetHeight;//滚动条的总高度var oHeight = odiv.offsetHeight;//滚动条的滑块高度//算出元素相对的位置var left = touch.clientX - disX; var top = touch.clientY - disY;// console.log(odiv)//移动if(top<0){odiv.style.top = 0 + 'px';} else if (top>pHeight-oHeight){odiv.style.top = pHeight-oHeight + 'px';}else {odiv.style.top = top + 'px';}var scrollTop = scrollMaxHeight*top/(pHeight-oHeight)scrollBox.scrollTop = scrollTop;} }function end() {flags= false}// 鼠标滚轮滚动 滚动条跟着滚动function onScroll() {var scrollBox = $('.scroll-box')[0]; //获取滚动盒子var scrollHeight = scrollBox.scrollHeight; //滚动条var clientHeight = scrollBox.clientHeight; //可视区var scrollTop = scrollBox.scrollTop; //距离顶部var scrollMaxHeight = scrollHeight - clientHeight; //可滚动的最大高度var scrollBall = document.getElementById('scrollBall'); //滚动条滑块元素var scrollBar = document.getElementById('scrollBar'); //滚动条滑块元素var pHeight = scrollBar.offsetHeight;//滚动条的总高度var oHeight = scrollBall.offsetHeight;//滚动条的滑块高度var top = scrollTop/scrollMaxHeight*(pHeight-oHeight)scrollBar.style.top = scrollTop+'px';scrollBall.style.top = top+'px';}// 监听鼠标抬起 离开动作window.addEventListener('mouseup',end)//鼠标抬起停止滚动window.addEventListener('mouseleave',end) //离开浏览器窗口停止滚动$('.scroll-box')[0].addEventListener('mouseleave',end) //离开盒子停止滚动</script></html>
