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学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
随机推荐
- spring实例教程
1.配置好spring mvc发现访问无法匹配,很可能是文件放的位置或者相对目录不对. 2.实例大全:http://www.yiibai.com/spring/spring-collections-l ...
- Android学习系列(42)--Android Studio实战技巧
使用android studio开发项目的一些问题,功能和技巧. 1. 环境 Mac OSX 10.9.5 + Android Studio 0.8.9 2. gradle项目加载超慢 这是因为gra ...
- SU suxcontour命令学习
- css3 总结01
前缀 chrome: -webkit- safari: -webkit- firefox: -moz- ie: -ms- opera: -o- 书写的时候应该先用有前缀的样式,再用无前缀的样式 颜色 ...
- jquery的siblings（）
jquery 点击 感兴趣 感兴趣变为 蓝色 去掉onclick事件 不感兴趣 变为 黑色 加上点击事件 点击 不感兴趣 不感兴趣变为 蓝色 去掉onclick 感兴趣 变为 黑色 加上点击事件 ht ...
- Gym 100814C Connecting Graph 并查集+LCA
Description standard input/output Statements Alex is known to be very clever, but Walter does not be ...
- wpf ListBox,item两列不等高。
业务有这样的需求,类似瀑布流.内容两列不等高展示. 只需要继承panel,重写MeasureOverride和ArrangeOverride方法就行了. 很简单,内容都在代码里. using Syst ...
- ArcGIS 点到直线的距离
/****点到直线的距离*** * 过点(x1,y1)和点(x2,y2)的直线方程为:KX -Y + (x2y1 - x1y2)/(x2-x1) = 0 * 设直线斜率为K = (y2-y1)/(x2 ...
- POJ3635 Full Tank?（DP + Dijkstra）
题目大概说,一辆带有一个容量有限的油箱的车子在一张图上行驶,每行驶一单位长度消耗一单位油,图上的每个点都可以加油,不过都有各自的单位费用,问从起点驾驶到终点的最少花费是多少? 这题自然想到图上DP,通 ...
- BestCoder#16 A-Revenge of Segment Tree
Revenge of Segment Tree Problem Description In computer science, a segment tree is a tree data struc ...