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基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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引用文件语句的对比
2006/10/09 PHP
全文搜索和替换
2006/10/09 PHP
中英文字符串翻转函数
2008/12/09 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
js function定义函数使用心得
2010/04/15 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
2011/07/26 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
python抓取百度首页的方法
2015/05/19 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
毕业生就业自荐信
2013/12/04 职场文书
中学教师自我鉴定
2014/02/07 职场文书
成绩单公证书
2014/04/10 职场文书
会计试用期自我评价
2014/09/19 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL