jQuery——自定义浏览器滚动条，改变滚动条样式。实现滚动条效果

自定义浏览器滚动条，并实现滚动条功能

废话少说，直接上代码：

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;}

<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="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;/*系统默认菜单被禁用*/-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>

jQuery——自定义浏览器滚动条，改变滚动条样式。实现滚动条效果相关推荐

滚动条如何设置样式和滚动条悬浮显示与隐藏
文章目录一.滚动条如何设置样式 1:滚动条的默认样式(如下图) 1:html代码 2:css代码 3:效果图 2:CSS设置滚动条的属性(重点) 3:设置滚动条的例子 1:css代码(在第1步的基础 ...
JQ实现自适应不同浏览器宽度改变不同样式
<div class=" width_h"> <div> <p> 宽度大于1800px 背景是红色</p> </div> ...
jquery 获取浏览器窗口改变事件
$(window).resize(function() { var width = $(this).width(); var height = $(this).height(); //console. ...
html中legend样式,echarts自定义图例legend文字和样式
话不多说,先上效果图. 要完成这个图并不难,主要是下面那个图例比较难,需要定制. 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这难点在于: 1.这里的图例文 ...
自定义浏览器滚动条的样式，详细讲解
CSS3自定义滚动条样式 -webkit-scrollbar 有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域, ...
自定义浏览器滚动条的样式
自定义IE浏览器滚动条样式追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5.5).下面列出了多个版本的支持性况: 滚动条样式支持情况支持浏览器版本可否继承 ...
自定义浏览器滚动条样式
转载自:https://www.lyblog.net/detail/314.html 自定义IE浏览器滚动条样式追溯浏览器对滚动条的自定义,恐怕最早的就是IE浏览器了(好像最开始支持的版本是IE5. ...
自定义浏览器滚动条的样式，打造属于你的滚动条风格
前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chro ...
自定义浏览器滚动条样式（兼容chrome和firefox）
大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我,解锁前端成长新姿势. 以下正文: 问题描述浏览器默认的滚动条样式太丑了,而且不同的浏览器下滚动条的样式也不一样,为了美观和统一,必 ...

jQuery——自定义浏览器滚动条，改变滚动条样式。实现滚动条效果

jQuery——自定义浏览器滚动条，改变滚动条样式。实现滚动条效果相关推荐

最新文章

热门文章