JS实现的页面自定义滚动条效果


Posted in Javascript onOctober 26, 2015

本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考,具体如下:

这里演示网页上用的滚动条效果,是一个自定义的滚动条代码,除了上下两个箭头以外,滚动条和一般的浏览器基本差不多,鼠标滚轮滚动,滚动条滚动。html结构很简单,mainBox是外层div,content是内容,滚动条div是js动态生成的。

运行效果截图如下:

JS实现的页面自定义滚动条效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动条</title>
<style type="text/css">
*{ margin:0; padding:0;}
p{ height:1000px;}
#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(//img.jbzj.com/file_images/article/201510/20151026113716032.jpg) }
.scrollDiv{ width:18px; position:absolute; top:0; background:#666; border-radius:10px;}
</style>
</head>
<body>
<div id="mainBox">
 <div id="content"></div>
</div>
<p></p>
<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 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
理解JS事件循环
Jan 07 Javascript
详谈javascript异步编程
Feb 21 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
js图片上传的封装代码
Aug 01 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
Sep 14 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 #Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 #Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 #Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 #Javascript
jquery获取url参数及url加参数的方法
Oct 26 #Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 #Javascript
angular.bind使用心得
Oct 26 #Javascript
You might like
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
php实现的双向队列类实例
2014/09/24 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
javascript 函数速查表
2010/02/07 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
vue给组件传递不同的值方法
2018/09/29 Javascript
js实现全选和全不选
2020/07/28 Javascript
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
通过Python 接口使用OpenCV的方法
2018/04/02 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
实习自我评价怎么写
2013/12/02 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
委托书的样本
2015/01/28 职场文书
给朋友的道歉短信
2015/05/12 职场文书
重阳节主题班会
2015/08/17 职场文书
《秋思》教学反思
2016/02/23 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python