js滚轮事件 js自定义滚动条的实现


Posted in Javascript onJanuary 18, 2020

本文实例为大家分享了js自定义滚动条的实现的具体代码,供大家参考,具体内容如下

描述:

自定义滚动条的实现

效果:

js滚轮事件 js自定义滚动条的实现

实现:

<!DOCTYPE html>
<html lang="">
 
<head>
 <meta charset="utf-8">
 <title></title>
 <style>
  * {margin: 0;padding: 0;}
  html,body { width: 100%;height: 100%;}
  #box { width: 100%; height: 100%; overflow: hidden;}
  /*一个个划过去的页面块*/
  .ball {
   width: 100%;
   height: 500px;
   font-size:100px;
   font-weight:bold;
   color: skyblue;
   text-align: center;
   line-height:500px;
  }
 
  /*//滚动栏*/
  #scroll {
   width: 20px; height: 96%;
   position: fixed; top: 2%; right: 5px;
   border-radius: 10px; background-color: rgba(235, 233, 233, 0.5);
   z-index: 9998; opacity: 0;
  }
 
  /*//滚动栏上的小长条*/
  #scrollBar {
   position: absolute; z-index: 1;/*//定在上面*/
   width: 20px; height: 40px;
   border-radius: 10px;
   left: 0; top: 0; background-color: red;opacity: 0.6;
  }
 </style>
</head>
 
<body style="overflow:hidden;">
<div id="box">
 <div id="content">
  <!--//营造div色块交替的感觉-->
  <p class="ball" style="background-color:#656565;">1</p>
  <p class="ball" style="background-color:#ffffff;">2</p>
  <p class="ball" style="background-color:#656565;">3</p>
  <p class="ball" style="background-color:#ffffff;">4</p>
  <p class="ball" style="background-color:#656565;">5</p>
  <p class="ball" style="background-color:#ffffff;">6</p>
 </div>
</div>
<div id="scroll">
 <div id="scrollBar"></div>
</div>
</body>
 
</html>
<script type="text/javascript">
 var content = document.getElementById("content");
 var box = document.getElementById("box");
 var scroll = document.getElementById("scroll");
 var scrollBar = document.getElementById("scrollBar");
 var Step = {
  value : 0,
  size : 20,
  maxVal : Math.ceil((content.offsetHeight-document.body.offsetHeight)/20),
  getCurrentVal:function(){
   return this.value;
  },
  next:function(){
   if(this.value==this.maxVal) return;
   this.value++;
  },
  pre:function(){
   if(this.value==0) return;
   this.value--;
  },
  getDistance:function(){
   return this.getCurrentVal()*this.size;
  },
  update:function(){
   this.maxVal = Math.ceil((content.offsetHeight-document.body.offsetHeight)/this.size);
  }
 }
 
 window.addEventListener("resize",function(){
  Step.update();
 });
 
 box.addEventListener("DOMMouseScroll",scrollfunc);
 box.addEventListener("mousewheel", scrollfunc);
 function scrollfunc(e){
  if(e.type=="mousewheel"){ //非FF
   e.wheelDelta<0?Step.next():Step.pre();
  } else { //FF
   e.detail>0?Step.next():Step.pre();
  }
  document.title = Step.getCurrentVal();
  box.scrollTop = Math.min(Step.getDistance(),content.offsetHeight-document.body.offsetHeight);
  //计算滚动比例
  var percent = box.scrollTop/(content.offsetHeight-document.body.offsetHeight);
  //显示滚动条
  scroll.style.opacity = 100;
  //计算滚动条的位置
  scrollBar.style.top = (scroll.offsetHeight-scrollBar.offsetHeight)*percent + "px";
 
 }
</script>

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

Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
小议Javascript中的this指针
Mar 18 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
javascript实现动态标签云
Oct 16 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
canvas绘制多边形
Feb 24 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
微信小程序实现文字跑马灯效果
May 26 Javascript
详解vue高级特性
Jun 09 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
原生JavaScript实现进度条
Feb 19 Javascript
vue实现扫码功能
Jan 17 #Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 #Javascript
js键盘事件实现人物的行走
Jan 17 #Javascript
javascript实现简易的计算器
Jan 17 #Javascript
JavaScript简易计算器制作
Jan 17 #Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 #Javascript
js布局实现单选按钮控件
Jan 17 #Javascript
You might like
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
Python根据服务获取端口号的方法
2019/09/25 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
护士思想汇报
2014/01/12 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
户外拓展活动方案
2014/02/11 职场文书
房产公证书范本
2014/04/10 职场文书
班级读书活动总结
2014/06/30 职场文书
学位证书委托书
2014/09/30 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
教师个人自我评价
2015/03/04 职场文书
廉政承诺书2015
2015/04/28 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
Python实现智慧校园自动评教全新版
2021/06/18 Python
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android