代码描述:js滚动条效果。js实现的模拟滚动条效果
自带的滚动调效果美观度实在差强人意,在一般美观度要求不高的网站还算是可以,但是如果美观度要求很高的话,那么就有点力不从心了,因为只有IE浏览器支持对滚动条的一些美化效果,如果想在谷歌或者火狐这样的浏览器也实现比较美观的效果,那么就需要模拟实现滚动条效果,下面是一段来自网络的代码实例和大家分享一下,代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> * { margin: 0; padding: 0; } #mainBox { width: 250px; height: 500px; border: 1px #bbb solid; position: relative; overflow: hidden; margin: 50px auto; } #content { height:1000px; position: absolute; left: 0; top: 0; } .scrollDiv { width: 6px; position: absolute; top: 0; background: #666; border-radius: 10px; } /* 章节类别 */ .m-catr { padding:15px 0 10px 12px; *padding:15px 0 10px 14px; } .m-catr .tte { float:left; line-height:35px; text-align:left; font-size:14px; font-weight:bold; color:#5b98db; } #content dl { width:225px; float:left; margin-top:10px; } #content dl dt, .m-catr dl dd { float:left; width:100%; line-height:25px; text-align:left; color:#444; } #content dl dt { font-weight:bold; } #content dl dd { margin-left:12px; } </style> </head> <body> <div class="m-catr f-cb"> <div id="mainBox"> <div id="content"> <dl data-type="menu"> <dt>第一单元科学是系统化了的知识</dt> <dd> 1、千篇一律与千变万化</dd> <dd> 2、双语言时代</dd> <dd> 3、人们如何做出决策</dd> <dd> 4、培养独立工作和独立思考的人</dd> </dl> <dl data-type="menu"> <dt>第二单元科学是系统化了的知识</dt> <dd> 1、千篇一律与千变万化</dd> <dd> 2、双语言时代</dd> <dd> 3、人们如何做出决策</dd> <dd> 4、培养独立工作和独立思考的人</dd> </dl> <dl data-type="menu"> <dt>第三单元科学是系统化了的知识</dt> <dd> 1、千篇一律与千变万化</dd> <dd> 2、双语言时代</dd> <dd> 3、人们如何做出决策</dd> <dd> 4、培养独立工作和独立思考的人</dd> </dl> <dl data-type="menu"> <dt>第四单元科学是系统化了的知识</dt> <dd> 1、千篇一律与千变万化</dd> <dd> 2、双语言时代</dd> <dd> 3、人们如何做出决策</dd> <dd> 4、培养独立工作和独立思考的人</dd> </dl> <dl data-type="menu"> <dt>第五单元科学是系统化了的知识</dt> <dd> 1、千篇一律与千变万化</dd> <dd> 2、双语言时代</dd> <dd> 3、人们如何做出决策</dd> <dd> 4、培养独立工作和独立思考的人</dd> </dl> </div> </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'); _scrollBox.setAttribute("id", "scrollBox"); 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'); $(function(){ $("#scrollBox").hide(); $("#mainBox").mouseover(function(){ $("#scrollBox").show(); }).mouseout(function(){ $("#scrollBox").hide(); }); }); </script> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能