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 相关文章推荐
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
Vue仿支付宝支付功能
May 25 Javascript
layui use 定义js外部引用函数的方法
Sep 26 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
第二节 对象模型 [2]
2006/10/09 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JavaScript中解析JSON数据的三种方法
2015/07/03 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
详解element-ui中form验证杂记
2019/03/04 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
python之import机制详解
2014/07/03 Python
Python3处理文件中每个词的方法
2015/05/22 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
python爬虫可以爬什么
2020/06/16 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
医院护理人员的自我评价分享
2013/10/04 职场文书
触电现场处置方案
2014/05/14 职场文书
安全口号大全
2014/06/21 职场文书
公证委托书格式
2014/09/13 职场文书
2014年领班工作总结
2014/11/25 职场文书
计生个人工作总结
2015/02/28 职场文书
学生会干部任命书
2015/09/21 职场文书
学校团代会开幕词
2016/03/04 职场文书
Python简易开发之制作计算器
2022/04/28 Python