div自定义的滚动条 （水平导航条）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
/* width:800px;*/
height:200px;
border:1px solid #ddd;
overflow: hidden;
/*white-space:nowrap; */
}
/*div::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
} div::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
margin-bottom:100px;
} div::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}*/
.scrollBar {
width: 30px !important;
height:10px !important;
background-color: #daa520;
position: absolute;
top: 200px;
left: 0px;
display: block;
border-radius: 6px;
z-index: 10;
} .scrollBarHover {
background-color: #b8860b;
} .scrollBarActive {
background-color: #ff8c00;
} .scrollContent {
width: 600px;
height: 600px;
border: 1px solid #808080;
overflow: hidden;
white-space: nowrap;
}
tr{ height:30px;
}
td{
width:200px;
border:1px solid #ddd;
}
table{ border-collapse: collapse;
table-layout:fixed;
}
</style>
</head>
<body>
<div id="text_div" class="scrollContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
←
<table>
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr><tr>
<td>data</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript"> function $(id) {
return document.getElementById(id);
} var ScrollBar = function(options) {
var defaults = {
barClass:'scrollBar',
barHoverClass: 'scrollBarHover',
barActiveClass: 'scrollBarActive',
barContent: null
},
doc = document,
utils = {
hide: function (obj) {
obj.style.display = 'none';
},
show :function(obj) {
obj.style.display = 'block';
},
isShow : function(c) {
return c.style["display"] === "none" ? !1 : !0
},
hasClassName: function(element, className) { var elementClassName = element.className;
return (elementClassName.length > 0 && (elementClassName == className ||
new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
},
addClassName: function(element, className) { if (!utils.hasClassName(element, className))
element.className += (element.className ? ' ' : '') + className;
return element;
}, removeClassName: function(element, className) { element.className = element.className.replace(
new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
return element;
},
getCurrentStyle : function(el) {
if (el.currentStyle) {
return el.currentStyle;
} else if (window.getComputedStyle) {
return getComputedStyle(el, null);
}
return null;
},
extend :function() {
var args = Array.prototype.slice.call(arguments);
if (args.length == 1)
args.unshift({});
for (var name in args[1]) {
if (args[1].hasOwnProperty(name)) {
args[0][name] = args[1][name];
}
}
return args[0];
},
bind: function(target, type, call) {
if (target.addEventListener) {
target.addEventListener(type, call, 0);
} else if (target.attachEvent) {
target.attachEvent('on' + type, call);
} else {
target['on' + type] = call;
}
},
unbind: function(target, type) {
if (target.removeEventListener) {
target.removeEventListener(type);
} else if (target.detachEvent) {
target.detachEvent('on' + type);
} else {
target['on' + type] = null;
}
}
}; options = utils.extend(defaults, options || {}); utils.extend(this, {
utils : utils,
bar : doc.createElement('div'),
content : options.barContent,
init: function() {
this.bar.className = options.barClass || 'scrollBar';
this.content = options.barContent; this.content.appendChild(this.bar); var el = doc.createElement('div'),style = utils.getCurrentStyle(this.content); el.style.cssText = 'overflow: hidden; position: relative;padding:2px; width:' + style.width + '; height: ' + style.height + ';';
var contentParent = this.content.parentNode; el.appendChild(this.content);
el.appendChild(this.bar);
contentParent.appendChild(el); this.wheelThread = 20;
this.isScrolling = !1;
this.setBarHeight();
var self = this;
var events = {
onMouseDown: function(e) {
e = e || window.event;
var target = e.currentTarget || e.srcElement;
target.style.cursor = 'default';
self.bar.x = e.clientX;
self.bar.t = parseInt(self.bar.style.marginLeft);
self.isScrolling = 1; options.barActiveClass && utils.addClassName(self.bar, options.barActiveClass);
},
onMouseMove: function(e) {
e = e || window.event;
var isClickButton = (e.button === 1 || e.button === 0);
if (self.isScrolling && isClickButton) {
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
self.scroll(e.clientX - self.bar.x);
e.preventDefault && e.preventDefault();
e.stopPropagation && e.stopPropagation();
}
},
onMouseUp: function() { if (self.isScrolling) {
self.isScrolling = 0; options.barActiveClass && utils.removeClassName(self.bar, options.barActiveClass);
}
},
onMouseOver: function() { options.barHoverClass && utils.addClassName(self.bar, options.barHoverClass)
},
onMouseOut: function() {
utils.removeClassName(self.bar, options.barHoverClass)
},
onMouseWheel: function(e) {
e = e || window.event;
if (utils.isShow(self.bar)) {
self.D = e.wheelDelta;
e.returnValue = !1;
var d = self.D < 0 ? self.wheelThread : 0 - self.wheelThread;
self.bar.x = e.clientX;
self.bar.t = parseInt(self.bar.style.marginLeft);
self.scroll(d)
} else{
self.scrollToBottom(e)
}
},
onClick: function(e) {
e.stopPropagation && e.stopPropagation()
},
onDomMouseScroll: function(e) {
if (utils.isShow(self.bar)) {
self.D = e.detail > 0 ? -1 : 1;
e.stopPropagation && e.stopPropagation();
e.preventDefault && e.preventDefault();
self.bar.x = e.clientX;
self.bar.t = parseInt(self.bar.style.marginLeft);
self.scroll(self.D < 0 ? self.wheelThread : 0 - self.wheelThread); } else {
self.scrollToBottom(e)
}
}
} utils.bind(this.bar, 'mousedown', events.onMouseDown);
utils.bind(doc, 'mousemove', events.onMouseMove);
utils.bind(this.bar, 'mouseout', events.onMouseOut);
utils.bind(this.bar, 'mouseover', events.onMouseOver);
utils.bind(doc, 'mouseup', events.onMouseUp);
utils.bind(this.content, 'mousewheel', events.onMouseWheel);
utils.bind(this.content, 'dommousescroll', events.onDomMouseScroll); },
onscroll : doc.onscroll || function() {
},
scrollToBottom : doc.scrollToBottom || function() {
},
scroll: function(b) { this.marginLeft = (this.bar.t || 0) + b;
if (this.marginLeft < 0)
this.marginLeft = 0;
if (this.marginLeft > this.content.clientWidth - this.bar.clientWidth)
this.marginLeft = this.content.clientWidth - this.bar.clientWidth,this.scrollToBottom();
this.bar.style.marginLeft = this.marginLeft + "px";
if (b == 0)
this.onscroll(b, b);
var a = (this.content.scrollWidth -
this.content.clientWidth) * parseInt(this.marginLeft) / (this.content.clientWidth - this.bar.clientWidth); this.content.scrollLeft = a; this.onscroll(a, b)
},
setBarHeight: function() {
this.onscroll(0, 0);
this.bar.style.width = "0";
this.utils.hide(this.bar); this.content.offsetWidth - this.content.scrollWidth >= 0 ? (this.bar.t = 0) : (this.bar.style.width = parseInt(this.content.offsetWidth / this.content.scrollWidth * this.content.offsetWidth) + "px",this.utils.show(this.bar),this.bar.t = parseInt(this.bar.style.marginLeft));
this.scroll(0);
}
}); } var scroll = new ScrollBar({
barContent: $('text_div')
});
scroll.init(); </script>
</body>
</html>
div自定义的滚动条 （水平导航条）的更多相关文章
- CSS水平导航条和纵向导航条
问题描述: 使用CSS制作水平导航条和纵向导航条 问题解决: (1)水平导航条 1.1 效果预览: 1.2 ...
- layui水平导航条三级
需求 需要做一个顶部的水平导航条,有三级,展开的时候二级和三级一起展开,结果如图: 效果 一级菜单 二级标题 三级菜单 三级菜单 二级标题 三级菜单 三级菜单 一级菜单 二级标题 三级菜单 ...
- HTML布局水平导航条2制作
前两个博文导航条都不是铺满水平的浏览器的,很多导航条样式都是随着浏览器的移动,是100%.此外前两个博文导航条都是块状点击的,也就是给a标签加宽高,设置成块状显示,点击的时候不一定要点文字,只要点击该 ...
- HTML布局水平导航条1制作
该文是用css制作个导航条,用竖线分隔,导航条是点击的多个区块.步骤:ul里设置需要数量的li,li中加上a链接给ul加样式,去掉默认的前面的点给li设置左浮动,让ul里的li横向排列a链接设置成块状 ...
- div自定义的滚动条 （竖直导航条）
<style type="text/css"> .scrollBar { width: 10px; background-color: #daa520; positio ...
- simple水平导航条
话不多说,看代码: html部分 <body> <ul> <li><a href="#">Home</a></li ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- Bootstrap 我的学习记录3 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
随机推荐
- CentOS VMware 配置IP小结 静态 配置 桥接 NAT
系统启动后可先ping下外网或局域网内其它机器. 如果配置虚拟机时选择的NAT上网方式,后面需要配置固定IP,请先参见VMware NAT方式下设置静态IP获得可用的IP范围和网关等信息. 先将ifc ...
- PHP 不使用第三个变量实现交换两个变量的值
//字符串版本 结合使用substr,strlen两个方法实现$a="a";$b="b";echo '交换前 $a:'.$a.',$b:'.$b.'<br ...
- java中new关键字和newInstance()方法有什么区别？
1.new可以调用带参数的构造函数,newInstance不可以. 2.new 是 java 的关键字,用来构造一个类的实例.而 newInstance 是 Class 的一个方法,不过两个写法的效果 ...
- Python基础4- 字符串
Python字符串是由数字.字母.下划线组成的一串字符,我们可以使用引号来创建字符串.如:str = 'Helloworld'在Python中没有char类型,单个字符也作为string使用; Pyt ...
- Find Minimum in Rotated Sorted Array
package leetcode; /* * * 注意问题: * 1. 原序列升序.降序问题,两种情况都要考虑 * 2. 边界问题,如果只有两个元素时要单独考虑,在num[mid]==num[left ...
- Codeforces 677E Vanya and Balloons（DP + 一些技巧）
题目大概说给一张地图,地图每个格子都有0到9中的某一个数字.现在要在一个格子放炸弹,炸弹爆炸后水柱有两种扩展方式,一种是上.下.左.右,另一种是左上.右下.右上.左下,且四个方向的长度都一样.问放哪个 ...
- CF# Educational Codeforces Round 3 E. Minimum spanning tree for each edge
E. Minimum spanning tree for each edge time limit per test 2 seconds memory limit per test 256 megab ...
- [转]crontab环境变量设置
原文连接:http://blog.csdn.net/zc02051126/article/details/20480289 come from http://www.360doc.com/conten ...
- webpack练手项目之easySlide（一）：初探webpack （转）
最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力. webpack是一个前端的打包管理工具,大家可以前往:http:/ ...
- [知识点]Cantor展开
// 此博文为迁移而来,写于2015年3月14日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vtyo.html 1.含 ...