原生js实现自定义滚动条

本文实例为大家分享了js实现自定义滚动条的具体代码，供大家参考，具体内容如下

1.HTML文件

div1是滚动条，div2是滚动小球，div3是文本区域容器，div4是文本区域。

div id="div">
     div id="div1">
     div id="div2">
     /div>
     /div>
     div id="div3">
     div id="div4">
     p>
    CSS3 教程/p>
     p>
    CSS3 教程/p>
     p>
    CSS3 简介/p>
     p>
    CSS3 边框/p>
     p>
    CSS3 圆角/p>
     p>
    CSS3 背景/p>
     p>
    CSS3 渐变/p>
     p>
    CSS3 文本效果/p>
     p>
    CSS3 字体/p>
     p>
    CSS3 2D 转换/p>
     p>
    CSS3 3D 转换/p>
     p>
    CSS3 过渡/p>
     p>
    CSS3 动画/p>
     p>
    CSS3 多列/p>
     p>
    CSS3 用户界面/p>
     p>
    CSS3 图片/p>
     p>
    CSS3 按钮/p>
     p>
    CSS3 分页/p>
     p>
    CSS3 框大小/p>
     p>
    CSS3 弹性盒子/p>
     p>
    CSS3 多媒体查询/p>
     p>
    CSS3 多媒体查询实例/p>
     /div>
     /div>
    /div>
    

2.css样式文件

通过容器溢出隐藏，文本区域的绝对定位，然后再交给js处理。

*{
    padding: 0;
     margin: 0;
}
#div{
    top:200px;
    left:25%;
    width: 50%;
    height: 300px;
     posITion: absolute;
 }
#div1{
    width: 20px;
     height: 300px;
     position: relative;
     background: #CCCCCC;
     border-radius: 28px;
     float: right;
     cursor: pointer;
}
#div1 #div2{
    left: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
     background: red;
    position: absolute;
}
#div3{
    width: 90%;
     height: 300px;
     border: 2px solid #CCCCCC;
    position: relative;
     float: left;
     overflow: hidden;
}
#div3 #div4{
    top:0;
    left:0;
    width: 100%;
     position: absolute;
     font-family: "微软雅黑";
    font-Size: 19px;
     letter-spacing: 1px;
     padding: 3px 6px;
}
    

3.js脚本代码

window.onload =function(){
     VAR allDiv =document.getElementById('div');
     var oDiv =document.getElementById('div2');
     var aDiv =document.getElementById('div1');
     var textDiv1 =document.getElementById('div3');
     var textDiv2 =document.getElementById('div4');
  // 进度条拖动，内容跟着运动事件 oDiv.onmousedown =function(ev){
     var oEvent =ev||event;
      var disY =oEvent.clientY -oDiv.offsetTop;
  if(oDiv.setCapture){
     oDiv.onmouSEMove =mouseMove;
     oDiv.onmouseup =mouseUp;
      oDiv.setCapture();
 }
else{
     document.onmousemove =mouseMove;
     document.onmouseup =mouseUp;
 }
  function mouseMove(ev){
     var oEvent =ev||event;
      var t =oEvent.clientY -disY;
      var bottomLine = aDiv.offsetHeight-oDiv.offsetHeight;
    if(t 0){
     t =0;
 }
    else if(t >
bottomLine){
     t =bottomLine;
 }
       var PErcent =t/272;
       oDiv.style.top =t+'px';
     textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent+'px';
  }
    ;
  function mouseUp(){
     this.onmousemove =null;
     this.onmouseup =null;
  if(oDiv.releaseCapture){
     oDiv.releaseCapture();
 }
 }
    ;
      return false;
 }
    ;
  // 点击进度条，开启定时器，小球做匀速运动到达后，清楚定时器 aDiv.onmousedown=function(ev){
     var oEvent =ev||event;
      var divY =oEvent.clientY-allDiv.offsetTop;
     var timer =null;
    var speed=10;
   clearInterval(timer) timer = setInterval(function(){
     var percent=oDiv.offsetTop/272;
   if(oDiv.offsetTopdivY-28){
     oDiv.style.top =oDiv.offsetTop + speed +'px';
     textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
 }
    else if(oDiv.offsetTop>
divY){
     oDiv.style.top =oDiv.offsetTop - speed +'px';
     textDiv2.style.top =-(textDiv2.offsetHeight-textDiv1.offsetHeight)*percent +'px';
 }
    else if(oDiv.offsetTop>
260){
     oDiv.offsetTop = 272+'px';
     clearInterval(timer);
 }
else if(oDiv.offsetTop10){
     oDiv.offsetTop = 0+'px';
     clearInterval(timer);
 }
else{
     clearInterval(timer);
 }
   }
    ,10);
  }
 }
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 原生js实现自定义滚动条组件
• js实现滚动条自动滚动
• Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
• JS自定义滚动条效果
• JavaScript实现简易聊天对话框(加滚动条)
• js滚轮事件 js自定义滚动条的实现
• JS实现滚动条触底加载更多
• 使用js实现一个简单的滚动条过程解析
• layer.js open 隐藏滚动条的例子
• vue 纯js监听滚动条到底部的实例讲解
• JavaScript 获取滚动条位置并将页面滑动到锚点

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！