javascript自定义滚动条插件，几行代码的事儿
在实际项目中，经常由于浏览器自带的滚动条样式太戳，而且在各个浏览器中显示不一样，所以我们不得不去实现自定义的滚动条，今天我就用最少的代码实现了一个自定义滚动条，代码量区区只有几十行，使用起来也非常方便。
<!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>
然后引入滚动条插件：
/**
* 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自定义滚动条插件，几行代码的事儿的更多相关文章
- 分享一个开源的JavaScript统计图表库，40行代码实现专业统计图表
提升程序员工作效率的工具/技巧推荐系列 推荐一个功能强大的文件搜索工具SearchMyFiles 介绍一个好用的免费流程图和UML绘制软件-Diagram Designer 介绍Windows任务管理 ...
- JavaScript模板引擎原理，几行代码的事儿
一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age% ...
- JavaScript学习笔记- 自定义滚动条插件
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...
- JavaScript-JQ实现自定义滚动条插件1.0
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...
- Jquery自定义滚动条插件
下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery. ...
- 自定义滚动条插件 mCustomScrollbar 使用介绍
引用有心的学士笔记 http://www.wufangbo.com/mcustomscrollbar/ http://www.jianshu.com/p/550466260856 官网地址 http: ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 自定义滚动条 - mCustomScrollbar
项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...
- 如何创建一个自定义jQuery插件
简介 jQuery 库是专为加快 JavaScript 开发速度而设计的.通过简化编写 JavaScript 的方式,减少代码量.使用 jQuery 库时,您可能会发现您经常为一些常用函数重写相同的代 ...
随机推荐
- SQL Server配置管理器的“别名”功能好处，实现内外网统一以及加了端口号导致的限制
这里主要有两个别名,经过研究,最好两个都配置成一样的,减少排查. 操作: 点击[别名],右键[新建别名] 这里的别名能实现比如我一台远程服务器,加了端口的,如果要实现在SQL登录的时候,使用计算机名来 ...
- ecshop /search.php SQL Injection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 ECSHOP商城系统Search.php页面过滤不严导致SQL注入漏洞 ...
- dedecms /plus/feedback.php SQL Injection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 . Dedecms v5.7的plus\feedback.php SQL ...
- sed学习笔记
sed是一个文本处理工具,可以根据给出的条件,自动对文本进行处理.在使用之前,需要知道的有三点:1. sed是逐行进行处理:2. sed不对原文件进行修改:3. sed默认是将处理后的内容打印到标准输 ...
- IOS - 打印COOKIE中的 CRFSToken
NSHTTPCookie 在iOS中使用NSHTTPCookie类封装一条cookie,通过NSHTTPCookie的方法读取到cookie的通用属性. - (NSUInteger)version; ...
- PhyLab2.0设计分析阶段任务大纲（α）
任务概述 由于接手软剑攻城队的PhyLab项目,省去了用户需求分析.团队编码规范.用户界面原型设计和后端逻辑设计的大部分环节,因此前期的主要任务落在了用户使用反馈.功能优化增改方向.用户体验优化以及源 ...
- Mysql学习笔记（五）数据查询之测试sql部分。
正文之前,介绍mysql一些很有趣的命令. 快速的创建表,并填充表数据. create table test like 已经有的表名: inset into test select * from f ...
- mysql user administration
1. 为数据库databasename创建web用户 1.1 创建数据库 mysql> create database databasename; 1.2 为数据库创建用户 mysql> ...
- Socket通信的理解
1.Socket(套接字) 是支持TCP/IP通信的基本操作单元.包含通信的五种必须信息:通信使用的协议,本机IP和端口,远程IP和端口. 2. 1.TCP连接 手机能够使用联网功能是因为手机底层实现 ...
- ef to sqlite 实际开发问题终极解决方法
版本问题 vs安装问题 x64/x86 发布问题 针对开发中遇到的问题,通过一下方法解决: 1.sqlite下载地址http://system.data.sqlite.org/index.html/d ...