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 相关文章推荐
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
jQuery读取和设定KindEditor值的方法
Nov 22 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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
使用 php4 加速 web 传输
2006/10/09 PHP
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
PHP执行SQL文件并将SQL文件导入到数据库
2015/09/17 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
通过C++学习Python
2015/01/20 Python
Python模拟百度登录实例详解
2016/01/20 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
Python进程间通信之共享内存详解
2017/10/30 Python
python写入已存在的excel数据实例
2018/05/03 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python 实现性别识别
2020/11/21 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
Java程序员常见面试题
2015/07/16 面试题
毕业生自我鉴定
2013/11/05 职场文书
战友聚会主持词
2014/04/02 职场文书
2014年征兵标语
2014/06/20 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android