jQuery——自定义浏览器滚动条，改变滚动条样式。实现滚动条效果
生活随笔
收集整理的這篇文章主要介紹了
jQuery——自定义浏览器滚动条，改变滚动条样式。实现滚动条效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
自定義瀏覽器滾動條，并實現(xiàn)滾動條功能
廢話少說，直接上代碼：
- HTML
- CSS：
- JS:
?
?
完整代碼：
<!DOCTYPE html> <html> <head><title>滾動條</title> </head> <script src="https://apps.bdimg.com/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;/*系統(tǒng)默認(rèn)菜單被禁用*/-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){ //獲取目標(biāo)元素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}// 鼠標(biāo)滾輪滾動 滾動條跟著滾動function onScroll() {var scrollBox = $('.scroll-box')[0]; //獲取滾動盒子var scrollHeight = scrollBox.scrollHeight; //滾動條var clientHeight = scrollBox.clientHeight; //可視區(qū)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';}// 監(jiān)聽鼠標(biāo)抬起 離開動作window.addEventListener('mouseup',end)//鼠標(biāo)抬起停止?jié)L動window.addEventListener('mouseleave',end) //離開瀏覽器窗口停止?jié)L動$('.scroll-box')[0].addEventListener('mouseleave',end) //離開盒子停止?jié)L動 </script> </html>?
總結(jié)
以上是生活随笔為你收集整理的jQuery——自定义浏览器滚动条，改变滚动条样式。实现滚动条效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微点主动防御软件测试自学,微点主动防御系
- 下一篇： cognex视觉软件visionpro基