原生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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 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自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
python3抓取中文网页的方法
2015/07/28 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Python全局变量用法实例分析
2016/07/19 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
python tkinter控件布局项目实例
2019/11/04 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
J2EE面试题
2016/03/14 面试题
业务员薪酬管理制度
2014/01/15 职场文书
怒海潜将观后感
2015/06/11 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL