基于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 相关文章推荐
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
JavaScript类的继承操作实例总结
Dec 20 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
js实现验证码功能
Jul 24 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
实现树状结构的两种方法
2006/10/09 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
详解JS数值Number类型
2018/02/07 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
python类参数self使用示例
2014/02/17 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
pandas数据集的端到端处理
2019/02/18 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
python连接mysql有哪些方法
2020/06/24 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
大学新生军训方案
2014/05/03 职场文书
商务经理岗位职责
2014/07/30 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
mysql事务隔离级别详情
2021/10/24 MySQL