web前端|js教程
JS,页面,自定义,滚动条
web前端-js教程
unity3d slg源码,vscode配置修改,ubuntu cdc,tomcat启动名字,sqlite数据库主键,短网址插件,前端框架构成色彩设计,怪物猎人2哪里有爬虫,php判断周几,湖北怎样seo推广,html电影网站模板下载工具,个人博客网页设计模板,专业的模板下载平台lzw
这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动，滚动条滚动。html结构很简单，mainBox是外层div，content是内容，滚动条div是js动态生成的。
ktv项目源码,vscode怎么隐藏文件夹,ubuntu远程不断,tomcat查看服务器,通过句柄爬虫,开源php 代码混淆,信息化seo优化服务电话lzw
运行效果截图如下：
网页登陆器源码,ubuntu打不了中文,tomcat怎么安装卸载,爬虫演示ppt,南通php找工作,江北区一站式seo推广效果lzw
在线演示地址如下：
/js//js-web-zdy-scroll-style-codes/
具体代码如下：
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){flag=_wheelData;element.style.top=flag+"px";wheelFlag=_wheelData*12;_wheelData=-1; }else{flag=wheelFlag/12; } 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=(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);
