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学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
随机推荐
- HTML5(常用的表单控件)
常用的HTML5的表单控件: Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type ...
- 我的c++学习(7)引用和复制构造函数
一.引用 什么是引用? 引用又称别名(alias),是一种非常特殊的数据类型.它不是定义一个新的变量,而是给一个已经定义的变量重新起一个别名,也就是 C++系统不为引用类型变量分配内存空间.引用主要用 ...
- http://blog.csdn.net/chenleixing/article/details/43740759
http://blog.csdn.net/chenleixing/article/details/43740759
- NumPy 学习（2）： 数组的操作
1. 简单一维数组的操作 一维数组的操作类似于python自身的list类型. In [14]: arr = np.arange(10) In [15]: arr Out[15]: array([0, ...
- happypack 原理解析
说起 happypack 可能很多同学还比较陌生,其实 happypack 是 webpack 的一个插件,目的是通过多进程模型,来加速代码构建,目前我们的线上服务器已经上线这个插件功能,并做了一定适 ...
- storm进程正常运行一段时间shut down，运维方式
storm启动一段时间后,无征兆的停止了,然后nimbus,supervisor,ui所有的worker都stop了. 我用的storm是0.8.2版本的 nimbus中留下的log如下 -- :: ...
- oracle的内置函数
1.wmsys.wm_concat 行转列函数 select wmsys.wm_concat(destnumber) from mms_send_his_record group by sendn ...
- 获取DLL中的方法名称
OpenFileDialog obj = new OpenFileDialog(); if (obj.ShowDialog() == System.Windows.Forms.DialogResu ...
- reshape2包--R高效数据处理包
介绍如何使用reshape2包将宽型数据转换成长型数据,将长型数据转换成宽型数据.Reshape2是Hadley Wickham开发和维护的. 1.长数据VS宽数据 宽型数据:每列代表一个不同的变量. ...
- 自定义UICollectionViewLayout之瀑布流
目标效果 因为系统给我们提供的 UICollectionViewFlowLayout 布局类不能实现瀑布流的效果,如果我们想实现 瀑布流 的效果,需要自定义一个 UICollectionViewLay ...