原生js实现自定义滚动条


Posted in Javascript onJanuary 20, 2021

本文实例为大家分享了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.offsetTop<divY-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.offsetTop<10){
 oDiv.offsetTop = 0+'px';
 clearInterval(timer);
 }else{
 clearInterval(timer);
 }
 
 
 },10);
 
 }
 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Google AJAX 搜索 API实现代码
Nov 17 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
tsconfig.json配置详解
May 17 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 #Javascript
JavaScript实现下拉列表
Jan 20 #Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 #Vue.js
详解实现vue的数据响应式原理
Jan 20 #Vue.js
vue实现简易计算器功能
Jan 20 #Vue.js
vue使用过滤器格式化日期
Jan 20 #Vue.js
Vue实现简单计算器
Jan 20 #Vue.js
You might like
php.ini 中文版
2006/10/28 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
JS中Location使用详解
2015/05/12 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
说一说Python logging
2016/04/15 Python
Python 查看文件的读写权限方法
2018/01/23 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
我的求职计划书
2014/01/10 职场文书
父母对孩子说的话
2014/04/12 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
毕业设计致谢词
2015/05/14 职场文书
服务行业标语口号
2015/12/26 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
微信小程序实现轮播图指示器
2022/06/25 Javascript
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python