酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
阿里云爆款特惠,精选爆款产品低至0.55折

原生js实现自定义滚动条的实例教程

来源:转载 作者:秩名 人气: 发布时间:2021-01-21
本篇文章主要介绍了原生js实现自定义滚动条的实例教程,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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);

 }

}

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/weixin_43759645/article/details/84344195

相关文章

  • uniapp微信小程序:key失效的解决方法介绍

    uniapp微信小程序:key失效的解决方法介绍

    uniapp 代码 template view image v-for=(item, i) in fileList :key=item[urlKey] :src=item[urlKey]/image /view/templatescript export default { props: { urlKey: {default: url}, fileList: Array } }/script 编译到 微信小程序 vi......
    01-21
  • 原生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 pCSS3 教程/p pCSS3 教程/p pCSS3 简介/p pCSS3 边框/p pCSS3 圆角/p pCSS3 背......
    01-21
  • Vue开发人员的7个最好的VSCode扩展的介绍

    Vue开发人员的7个最好的VSCode扩展的介绍

    在Visual Studio中添加正确的VS Code扩展可以让你作为开发者的生活变得更加轻松。 它们可以帮助格式化、可伸缩性、强制执行最佳实践,从而自动化开发过程中许多容易忘记的任务。它们也可以只是有趣的扩展,使我们的代码看起来更漂亮/更容......
    01-20
  • vue element el-transfer增加拖拽功能的实现

    vue element el-transfer增加拖拽功能的实现

    芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能;原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs 首先安装 1 sudo npm i sortablejs --save-dev html代码 1 2 3 4 5 template el-transfer ref = transfer id ......
    01-15
  • 微信小程序实现多图上传的方法

    微信小程序实现多图上传的方法

    看一下效果图 index.html view class=imgs block wx:for={{ imgs }} wx:key={{ index }} view class=img-box image src={{ item }} / icon class=iconfont size=18px color=gray data-index={{ index }} bind:tap=close type=cancel/icon......
    06-20
  • Javascript执行流程细节的介绍

    Javascript执行流程细节的介绍

    Javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等,这些概念正是JS引擎工作的核心组件......
    05-15
  • javascript代码是如何被压缩

    javascript代码是如何被压缩

    随着前端的发展,特别是 React , Vue 等构造单页应用的兴起,前端的能力得以很大提升,随之而来的是项目的复杂度越来越大。 此时的前端的静态资源也越来越庞大,而毫无疑问 javascript 资源已是前端的主体资源,对于压缩它的体积至为重......
    05-06
  • 解决React在安装antd之后出现的Can't resolve './locale'问题

    解决React在安装antd之后出现的Can't resolve './locale'问题

    React在安装antd之后出现的Cant resolve ./locale问题,是因为moment在2.2之后的版本都有问题,而react默认使用了最新的moment,但是在moment@2.18.1中是没有问题的。 解决方案就是配置webpack的alias,将所有的 moment 路径引用导入到 mo......
    05-03
  • jQuery实现移动端图片上传预览组件的方法

    jQuery实现移动端图片上传预览组件的方法

    我们先来捋一捋想要实现的功能: 预览 删除 压缩 上传到服务器 基本机构 这样,我们的组件结构就有了: ;!function(window, $, undefined){ function Upload() { }; Upload.prototype.change = function() { }; Upload.prototype.del = f......
    05-01
  • js解析JSON数据的详解

    js解析JSON数据的详解

    JSON 数据如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 { name : mkyong , age : 30, address : { streetAddress : 88 8nd Street , city : New York }, phoneNumber : [ { type : home , number : 111 111-1111 }, { type : ......
    04-21

最新更新