web自定义滚动条

来源：互联网发布：瞩目软件编辑：程序博客网时间：2024/05/18 12:34

web自定义滚动条

web中有系统自带的滚动条，系统自带的滚动条颜色单一，

不美观。自定义滚动条可根据不同的业务场景制作不同的样式。

实现效果：

实现思路：

一、布局

(1)将整个滑动区块用box div包裹，内容content和scroll，

scroll包裹bar 。bar觉得定位于scroll

二、JS

(1).点击滑块bar时，获取滑块相对上级父元素的高度，滑块滑块移动时，获取

移动时的坐标位置，计算y轴偏移量。变换滑块bar的top值。根据比例相应的

变换右侧content的marginTop高度.

布局图：

实现代码：

customscrollbar.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>自定义滚动条</title>    <style>        *{            margin: 0;            padding: 0;        }        html{            height: 100%;/* 相对于浏览器窗口的高度计算 */        }        body{            height: 100%;  /*相对于父元素的高计算*/            background: url("images/bg.jpg") no-repeat;/*背景图片*/            background-size: cover;/*设置背景的尺寸:等比例缩放*/            user-select: none;/*禁止文本选中*/        }        #box{            position: fixed;/*固定定位:相对于浏览器窗口定位*/            left: 50px;     /*距离浏览器窗口左边的距离*/            bottom: 30px;            width: 600px;            height: 400px;            /*background: #996633;*/            border: 1px solid #996633 ;            overflow: hidden;        }        .content{            width: 560px;            height: 300px;            /*background:red ;*/            margin: 20px;        }        .content h3{            color: #996633;        }        .content p{            color: #996600;            font-size: 12px;            line-height: 30px;/*行高*/            text-indent: 25px;/*首行缩进*/        }        .scroll{            position: absolute;/*绝对定位:相对于拥有定位属性            (relative/absolute/fixed)的最近的父元素定位，如果所有的            父元素都没有定位属性的话就相对于浏览器窗口定位            */            right: 2px;            top: 43px;            width: 16px;            height: 320px;            background: url("images/scroll_bar.png");                    }        .bar{            position: absolute;            left: -5px;            top: 0px;            width: 24px;            height: 12px;            background: url("images/scroll.png");            cursor: move;/*鼠标的形状:可移动*/        }    </style></head><body>   <div id="box">       <!-- 正文 -->       <div class="content">           <h3>简介</h3>           <p>正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文           </p>           <img src="images/1.jpg" style="width: 200px;height: 140px" alt="解释说明" />           <img src="images/2.jpg" style="width: 200px;height: 140px" alt="解释说明"  />           <p>正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文               正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文           </p>       </div>       <!--滚动条-->       <div class="scroll">           <!--小滑块-->           <div class="bar">           </div>       </div>   </div>   <script type="text/javascript">       var oBar=document.getElementsByClassName("bar")[0];       var con=document.getElementsByClassName("content")[0];       //鼠标按下去       oBar.onmousedown=function (ev) {           //获取鼠标的位置，改变滑块的top值           //获取鼠标的坐标位置           console.log(ev);           var ev=ev || window.event;//做浏览器的兼容           var y1=ev.clientY;//获取鼠标的y坐标           //获取滑块原来的位置           var t=oBar.offsetTop;           //鼠标移动过程中           document.onmousemove=function (ev) {               var ev=ev || window.event;//做浏览器的兼容               var _top=ev.clientY-y1+t;               //控制_top的范围               if(_top<0){                   _top=0;               }else if(_top>308){                   _top=308;               }               //把新的坐标赋值给小滑块               oBar.style.top=_top+"px";               //比例值               var s=_top/308;               //css margin-top   js marginTop               //获取内容区域块的高度               con.style.marginTop=-s*(con.offsetHeight-150)+"px";           }           //鼠标抬起解绑事件           document.onmouseup=function () {               document.onmousemove=null;               document.onmouseup=null;           }       }    </script></body></html>

阅读全文

0 0