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学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
随机推荐
- HDU 5867 Sparse Graph （2016年大连网络赛 I bfs+补图）
题意:给你n个点m条边形成一个无向图,问你求出给定点在此图的补图上到每个点距离的最小值,每条边距离为1 补图:完全图减去原图 完全图:每两个点都相连的图 其实就是一个有技巧的bfs,我们可以看到虽然点 ...
- TeeChart Pro 5.0
这是Delphi7自带例子 C:\Program Files\Borland\Delphi7\Demos\TeeChart 以下为翻译的文字,有部分不准确. TeeChart Pro 5.0是一个库 ...
- JS实现选择不同select标签option值的验证
js实现不同select标签option值的验证 功能描述: 选择中文时,匹配中文的正则表达式,选择英文选项是匹配英文的表达式,并且有对应的提示信息. html代码片段: <select id= ...
- three.js运动
<!DOCTYPE html> <html> <head> <title>Example 01.04 - Materials, light and an ...
- POJ3184 Ikki's Story I - Road Reconstruction（最大流）
求一次最大流后,分别对所有满流的边的容量+1,然后看是否存在增广路. #include<cstdio> #include<cstring> #include<queue& ...
- 【原】iOS中KVC和KVO的区别
在iOS开发中经常会看到KVC和KVO这两个概念,比较可能混淆,特地区分一下 KVC(Key Value Coding) 1> 概述 KVC:Key Value Coding,键值编码,是一种间 ...
- [译]使用Continuous painting mode来分析页面的绘制状态
Chrome Canary(Chrome “金丝雀版本”)目前已经支持Continuous painting mode,用于分析页面性能.这篇文章将会介绍怎么才能页面在绘制过程中找到问题和怎么利用这个 ...
- 【BZOJ1208】[HNOI2004]宠物收养所 Splay
还是模板题,两颗splay,找点删即可. #include <iostream> #include <cstdio> #include <cstdlib> #def ...
- BZOJ1391: [Ceoi2008]order
Description 有N个工作,M种机器,每种机器你可以租或者买过来. 每个工作包括若干道工序,每道工序需要某种机器来完成,你可以通过购买或租用机器来完成. 现在给出这些参数,求最大利润 Inpu ...
- 定义 iOS 方法名等不错的规范
1.配置视图不应命名为 setxxxx, 而应叫做 showxxxx 2.让按钮高亮不应叫做 showxxx, 而应叫做 highlightedxxx. 3,弹出 toastView 可以用 show ...