基于JavaScript实现自定义滚动条


Posted in Javascript onJanuary 25, 2017

可直接使用的js滚动条,先看看效果图:

基于JavaScript实现自定义滚动条

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>自定义滚动条</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条</title>
<style type="text/css">
*{ margin:0; padding:0;}
#mainBox{ 
 width:400px; 
 height:500px; 
 border:1px #bbb solid; 
 position:relative; 
 overflow:hidden;
  margin:50px auto;
 }
#content{ 
 height:2500px; 
 position:absolute; 
 left:0; 
 top:0; 
 background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1485320653275&di=b7bc29cc2c7b3388d44958d8f97db0a3&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20151212%2Fmp48094209_1449905365456_7.jpg) 
}
.scrollDiv{
 width:18px; 
 position:absolute; 
 top:0; 
 background:#666;
 border-radius:10px;
}
</style>
</head>
<body>
<div id="mainBox">
 <div id="content"></div>
</div>
<script type="text/javascript">
var doc=document;
var _wheelData=-1;
var mainBox=doc.getElementById('mainBox');
function bind(obj,type,handler){
 var node=typeof obj=="string"?$(obj):obj;
 if(node.addEventListener){
 node.addEventListener(type,handler,false);
 }else if(node.attachEvent){
 node.attachEvent('on'+type,handler);
 }else{
 node['on'+type]=handler;
 }
}
function mouseWheel(obj,handler){
 var node=typeof obj=="string"?$(obj):obj;
 bind(node,'mousewheel',function(event){
 var data=-getWheelData(event);
 handler(data);
 if(document.all){
 window.event.returnValue=false;
 }else{
 event.preventDefault();
 }
 });
 //火狐
 bind(node,'DOMMouseScroll',function(event){
 var data=getWheelData(event);
 handler(data);
 event.preventDefault();
 });
 function getWheelData(event){
 var e=event||window.event;
 return e.wheelDelta?e.wheelDelta:e.detail*40;
 }
}
function addScroll(){
 this.init.apply(this,arguments);
}
addScroll.prototype={
 init:function(mainBox,contentBox,className){
 var mainBox=doc.getElementById(mainBox);
 var contentBox=doc.getElementById(contentBox);
 var scrollDiv=this._createScroll(mainBox,className);
 this._resizeScorll(scrollDiv,mainBox,contentBox);
 this._tragScroll(scrollDiv,mainBox,contentBox);
 this._wheelChange(scrollDiv,mainBox,contentBox);
 this._clickScroll(scrollDiv,mainBox,contentBox);
 },
 //创建滚动条
 _createScroll:function(mainBox,className){
 var _scrollBox=doc.createElement('div')
 var _scroll=doc.createElement('div');
 var span=doc.createElement('span');
 _scrollBox.appendChild(_scroll);
 _scroll.appendChild(span);
 _scroll.className=className;
 mainBox.appendChild(_scrollBox);
 return _scroll;
 },
 //调整滚动条
 _resizeScorll:function(element,mainBox,contentBox){
 var p=element.parentNode;
 var conHeight=contentBox.offsetHeight;
 var _width=mainBox.clientWidth;
 var _height=mainBox.clientHeight;
 var _scrollWidth=element.offsetWidth;
 var _left=_width-_scrollWidth;
 p.style.width=_scrollWidth+"px";
 p.style.height=_height+"px";
 p.style.left=_left+"px";
 p.style.position="absolute";
 p.style.background="#ccc";
 contentBox.style.width=(mainBox.offsetWidth-_scrollWidth)+"px";
 var _scrollHeight=parseInt(_height*(_height/conHeight));
 if(_scrollHeight>=mainBox.clientHeight){
 element.parentNode.style.display="none";
 }
 element.style.height=_scrollHeight+"px";
 },
 //拖动滚动条
 _tragScroll:function(element,mainBox,contentBox){
 var mainHeight=mainBox.clientHeight;
 element.onmousedown=function(event){
 var _this=this;
 var _scrollTop=element.offsetTop;
 var e=event||window.event;
 var top=e.clientY;
 //this.onmousemove=scrollGo;
 document.onmousemove=scrollGo;
 document.onmouseup=function(event){
 this.onmousemove=null;
 }
 function scrollGo(event){
 var e=event||window.event;
 var _top=e.clientY;
 var _t=_top-top+_scrollTop;
 if(_t>(mainHeight-element.offsetHeight)){
  _t=mainHeight-element.offsetHeight;
 }
 if(_t<=0){
  _t=0;
 }
 element.style.top=_t+"px";
 contentBox.style.top=-_t*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
 _wheelData=_t;
 }
 }
 element.onmouseover=function(){
 this.style.background="#444"; 
 }
 element.onmouseout=function(){
 this.style.background="#666"; 
 }
 },
 //鼠标滚轮滚动,滚动条滚动
 _wheelChange:function(element,mainBox,contentBox){
 var node=typeof mainBox=="string"?$(mainBox):mainBox;
 var flag=0,rate=0,wheelFlag=0;
 if(node){
 mouseWheel(node,function(data){
 wheelFlag+=data;
 if(_wheelData>=0){
  flag=_wheelData;
  element.style.top=flag+"px";
  wheelFlag=_wheelData*12;
  _wheelData=-1;
 }else{
  flag=wheelFlag/12;
 }
 if(flag<=0){
  flag=0;
  wheelFlag=0;
 }
 if(flag>=(mainBox.offsetHeight-element.offsetHeight)){
  flag=(mainBox.clientHeight-element.offsetHeight);
  wheelFlag=(mainBox.clientHeight-element.offsetHeight)*12;
 }
 element.style.top=flag+"px";
 contentBox.style.top=-flag*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
 });
 }
 },
 _clickScroll:function(element,mainBox,contentBox){
 var p=element.parentNode;
 p.onclick=function(event){
 var e=event||window.event;
 var t=e.target||e.srcElement;
 var sTop=document.documentElement.scrollTop>0?document.documentElement.scrollTop:document.body.scrollTop;
 var top=mainBox.offsetTop;
 var _top=e.clientY+sTop-top-element.offsetHeight/2;
 if(_top<=0){
 _top=0;
 }
 if(_top>=(mainBox.clientHeight-element.offsetHeight)){
 _top=mainBox.clientHeight-element.offsetHeight;
 }
 if(t!=element){
 element.style.top=_top+"px";
 contentBox.style.top=-_top*(contentBox.offsetHeight/mainBox.offsetHeight)+"px";
 _wheelData=_top;
 }
 }
 }
}

new addScroll('mainBox','content','scrollDiv');
</script>
</body>
</html>

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

Javascript 相关文章推荐
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
javascript date格式化示例
Sep 25 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
基于javascript实现数字英文验证码
Jan 25 #Javascript
js阻止移动端页面滚动的两种方法
Jan 25 #Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 #Javascript
json数据处理及数据绑定
Jan 25 #Javascript
详解jQuery中ajax.load()方法
Jan 25 #Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 #Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 #Javascript
You might like
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
如何在python中实现随机选择
2019/11/02 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
历史系毕业生自荐信
2013/10/28 职场文书
高一家长会邀请函
2014/01/12 职场文书
新年爱情寄语
2014/04/08 职场文书
村干部培训方案
2014/05/02 职场文书
园林技术专业求职信
2014/07/28 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
学校运动会加油词
2015/07/18 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书