原生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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
Prototype 学习 Prototype对象
Jul 12 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
使用angular写一个hello world
Jan 23 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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 feof用来识别文件末尾字符的方法
2010/08/01 PHP
php自定义session示例分享
2014/04/22 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
Symfony核心类概述
2016/03/17 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python判断变量是否为列表的方法
2020/09/17 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
银行竞聘报告范文
2014/11/06 职场文书
推荐信范文大全
2015/03/27 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书