原生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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
javascript实现倒计时效果
Feb 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
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP开发注意事项总结
2015/02/04 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
js html实现计算器功能
2018/11/13 Javascript
javascript History对象原理解析
2020/02/17 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python socket网络编程之粘包问题详解
2018/04/28 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
如何一键升级Python所有包
2020/11/05 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
生态养殖创业计划书
2014/05/06 职场文书
廉政教育的心得体会
2014/09/01 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
节水倡议书
2015/01/19 职场文书
公司行政管理制度范本
2015/08/05 职场文书
商业计划书格式、范文
2019/03/21 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers