javascript自定义滚动条插件,几行代码的事儿
2014-08-09 14:30
375 查看
在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便。
View Code
然后引入滚动条插件:
将所贴代码复制到编辑器中进行预览吧,是不是感觉特酷!
这里的滚动条样式你想设计成那样都行,给予你充分的发挥空间,是不是感觉挺爽!
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>自定义滚动条</title> <style type="text/css"> body,ul,dl,dd{ margin:0; padding:0; font-size:12px; font-family:'微软雅黑';} .clear{ zoom:1} .clear:after{ display:block; content:""; clear:both} .box{margin:28px auto; width:164px; height:440px; background:#000; padding:8px;} #wrap{ width:170px; height:386px; background:#1c1c1d; overflow:hidden; position:relative; } #listbox{ float:left; width:160px; position:absolute; left:0; top:0; } #scrollbox{ float:right; width:3px; height:386px; background: #333; position:relative;} #scrollbar{ width:3px; height:30px; background:#cc3f2e; position:absolute; left:0; top:0;} li{ height:80px; margin-bottom:8px; list-style:none;} .picbox,.div{ float:left;} .picbox{ width:150px; position:relative; } .picbox span{ position:absolute; left:0px; bottom:0px; width:90px; height:22px;} dl{ width:139px; height:76px; color:#fff; padding:4px 0 0 10px;line-height:18px; position:absolute;left:0; top:0; opacity:0.2; filter:alpha(opacity=20); } .div{width:149px; height:80px; position:relative; } .mark{width:149px; height:80px; position:absolute; top:0; left:0; background:#fff; opacity:0.1; filter:alpha(opacity=10);} .nav{ width:160px; height:35px; font-family:'微软雅黑';background:#1c1c1d; padding-top:5px;} .a,.b{ width:152px; height:24px; line-height:24px; background:#666; text-align:center; float:left; color:#fff; cursor:pointer} .a{margin-right:5px; display:inline; background:#333; color:#666; } li.active .mark{opacity:0.2; filter:alpha(opacity=20);} li.active dl{ opacity:0.7; filter:alpha(opacity=70);} </style> </head> <body> <div class="box"> <div class="nav"> <div class="a">猜你喜欢</div> </div> <div id="wrap"> <ul id="listbox"> <li class="active"> <div class="picbox"> <span class="a1"></span> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> <li> <div class="picbox"> <span class="a2"></span> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> <li> <div class="picbox"> <span class="a2"></span> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> <li> <div class="picbox"> <span></span> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> <li> <div class="picbox"> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> <li> <div class="picbox"> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> <li> <div class="picbox"> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> <li> <div class="picbox"> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> <li> <div class="picbox"> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> <li> <div class="picbox"> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> <li> <div class="picbox"> </div> <div class="div"> <div class="mark"></div> <dl class="textbox"> <dt>飞狐外传</dt> <dd>主演:方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd> <dd>史上身材最棒狐仙</dd> </dl> </div> </li> </ul> <div id="scrollbox"> <div id="scrollbar"></div> </div> </div> </div> </body> <script src="tinyScroll.js"></script> <script> new tinyScroll({ wrapBox : document.getElementById('wrap'), wrapList : document.getElementById('listbox'), scrollBox :document.getElementById('scrollbox'), scrollBar : document.getElementById('scrollbar') }) </script> </html>
View Code
然后引入滚动条插件:
/** * javascript自定义滚动条(滚动条高度可以动态改变) * @param opts * 调用方式 * new tinyScroll({ wrapBox : document.getElementById('wrap'), wrapList : document.getElementById('listbox'), scrollBox :document.getElementById('scrollbox'), scrollBar : document.getElementById('scrollbar') }) */ function tinyScroll(opts) { this.wrapBox = opts.wrapBox; this.wrapList = opts.wrapList; this.scrollBox = opts.scrollBox; this.scrollBar = opts.scrollBar; this.scale = 0; this.height = 0; this.maxTop = 0; this.ListMaxTop = 0; this.top = 0; this.bindEvent(); } tinyScroll.prototype = { constructor: tinyScroll, init: function() { this.scale = this.wrapBox.clientHeight / this.wrapList.scrollHeight; if (this.scale > 1) this.scale = 1; this.height = this.scale * this.scrollBox.scrollHeight; this.maxTop = this.scrollBox.scrollHeight - this.height; this.ListMaxTop = this.wrapBox.clientHeight - this.wrapList.scrollHeight; if (this.scale == 1) this.scrollBox.style.display = 'none'; this.scrollBar.style.height = this.height + 'px'; }, bindEvent: function() { var that = this; var mouseScroll = function(ev) { ev = ev || event; var fx = ev.wheelDelta || ev.detail; var bDown = true; if (ev.detail) { bDown = fx > 0 ? true: false; } else { bDown = fx > 0 ? false: true; } if (bDown) { that.top += 10; } else { that.top -= 10; } that.fnScroll(); if (ev.preventDefault) { ev.preventDefault(); } return false; }; this.init(); this.scrollBar.onmousedown = function(ev) { ev = ev || event; var disY = ev.clientY - this.offsetTop; document.onmousemove = function(ev) { ev = ev || event; that.top = ev.clientY - disY; that.fnScroll(); }; document.onmouseup = function() { document.onmouseup = document.onmousemove = null; }; return false; }; this.wrapBox.onmousewheel = mouseScroll; if (this.wrapList.addEventListener) { this.wrapList.addEventListener('DOMMouseScroll', mouseScroll, false); } }, fnScroll: function() { if (this.top < 0) this.top = 0; if (this.top > this.maxTop) this.top = this.maxTop; var scale = this.top / this.maxTop; var listTop = scale * this.ListMaxTop; this.scrollBar.style.top = this.top + 'px'; this.wrapList.style.top = listTop + 'px'; } };
将所贴代码复制到编辑器中进行预览吧,是不是感觉特酷!
这里的滚动条样式你想设计成那样都行,给予你充分的发挥空间,是不是感觉挺爽!
相关文章推荐
- javascript自定义滚动条插件.
- Cordova应用的JavaScript代码和自定义插件代码的调试
- javascript自定义滚动条实现代码
- JavaScript模板引擎原理,几行代码的事儿
- javascript自定义滚动条实现代码
- JavaScript模板引擎原理,几行代码的事儿
- Javascript模板引擎原理,几行代码的事儿
- JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
- 【MooTools】自定义滚动条小插件
- 用Javascript检查Adobe PDF插件是否安装的实现代码
- jQuery插件Datepicker日期选择器实现Javascript自定义日期时间选择功能
- CSS自定义WebKit内核浏览器滚动条实现代码
- 放一段图片自定义大小调整的代码(jQuery插件)
- javascript学习笔记(十七) 检测浏览器插件代码
- Jquery自定义滚动条插件
- 简单几行javascript代码,实现动态倒计时功能
- phonegap中java插件开发及javascript(js)调用java代码
- vs2010 javascript代码折叠扩展插件
- myEclipse7.5中安装 javascript,extjs的代码自动提示spket插件和extjs desiner可视化代码生成工具,extjs的一个很好的学习视频资源地址
- javascript模拟滚动条实现代码