这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了基于 JavaScript 实现自定义滚动条,可以直接使用的滚动条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
可直接使用的 js 滚动条,先看看效果图:
代码如下
- <!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://photocdn.sohu.com/20151212/mp48094209_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>
来源: http://www.phperz.com/article/17/0629/328129.html