修改了默认的浏览器滚动条;可以配合设计实现;

HTML代码如下:

<body>
<div id="screen">
<div class="content">
<h2>右边滚动条的效果是copy一个老外的代码实现的</h2>
Well, usually I don't comment my work, but this one being a "pure technical demo", and as I had to place some content here, I will make an exception.<br><br>
Once upon the time I stumbled upon the great
<a href="javascript:;" target="_blank">点此查看本页实现原理</a> by Hesido.
<br><br>I was very curious to see how this was done and even possible, but looking at the JS code, I couldn't understand a bit of it. Sort of disappointed, I decided to "reinvent the [mouse] wheel" and see what I could do myself.
<br><br>
As always, it was just a "pushing the envelope" kind of exercice, and it might or might not work for you. Please donuse this in your production sites as it could divide by zero and blow up destroying the world.
<br><br>

My expectations:
<ul>
<li>Minimal and plain old JS code
<li>No CSS hack, no "bugs compliant" features, minimum browsers work-arounds
<li>No JS mousewheel and keyboard event: just hook to the native OS scrolling mechanism (that's the trick, the actual scrollbars are still there, the script is just painting on top of them)
<li>Skinned scrollbars 100% CSS positionned, by the browser itself and not by my JS code - no lag on resize (that's the second trick)
<li>Zero CPU cycle used when idle - no setInterval loop
</ul>
<br>
Findings :
<ul>
<li>Avoid reading cascaded style sheet from JS (that's a mess)
<li>Avoid dealing with <a href="javascript:;" target="_blank">computed vs. cascaded</a> browsers inconsistencies (that's another mess)
<li>Firefox is unable to know whether the left mouse button is pressed or not
<li>SAFARI will handle JS events outside of its window (and that's great!)
</ul>
<br>
Known issues:
<ul>
<li>Will manage vertical scrollbars only
<li>Won't work in Opera (onmouseup event won't fire, drawings/refresh artifacts)
<li>Firefox won't release the left mouse button outside of the browser windows
</ul>
<br>
Developped using Firefox 2.0 + Firebug 1.0. Tests successfully passed on SAFARI win 3.0, Firefox 3 (latest alpha), IE6 and IE7.
<br><br>
That's all folks,
<br><br>
happy dhteumeuleuing :)
<br><br>
GF Nov 2007
<br><br>
</div>
</div>
</body>

`

CSS代码如下:

<style type="text/css">
body { margin: 0; padding: 0; background: #222; width: 100%; height: 100%;font-family: verdana;}
/*内容区*/
#screen {
position: absolute;
left: 20%;
top: 10%;
height: 40%;
width: 60%;
overflow: auto;
background: #000;
color: #fff;
}
.content {
position:relative;
font-size: 0.8em;
color: #fff;
padding: 1em;
height: 100%;
}
/*a样式*/
a{
text-decoration: none;
color:#ff8000;
}
a:hover {
text-decoration: none;
background:#ff8000;
color:#ffffff;
}
a:visited {
text-decoration: none;
color:#ff8000;
}
a:visited:hover {
text-decoration: none;
background:#ff8000;
color:#ffffff;
}
/*JS要控制的样式*/
.cds_scrollbar {
position: absolute;
background: #555 url(style/12476505130.gif);
background:;
right: 0px;
cursor: pointer;
}
.cds_scrollbar_over {
background: #aaa url(style/12476497481.gif);
}
.cds_scrollbar_pushed {
background: #fff url(style/12476497480.gif);
}
.cds_track {
position: absolute;
background: #222 url(style/12476497482.gif);
right: -1px;
top: 0px;
height: 100%;
cursor: pointer;
}
.cds_up {
position: absolute;
background: #f60 url(style/12476497483.gif);
right: 0px;
top: 0px;
cursor: pointer;
}
.cds_down {
position: absolute;
background: #f60 url(style/12476497483.gif);
right: 0px;
bottom: 0px;
cursor: pointer;
}
</style>

JavaScript代码如下(JScopy别人的):

<script>
var cds = {
O : [],
ok : false,
ym : 0,
N : 0,
fo : 0,
sc : 0,
sp : 0,
to : 0,
/* 鼠标离开的时候 */
m_move : function(e) {
if (!e) e = window.event;
/* 释放到窗口外 */
if (cds.fo.sg && !cds.w3c && !e.button) { cds.m_up(); return; }
/* 垂直鼠标位置 */
cds.ym = e.screenY;
/* 拖动滚动条*/
if (cds.fo.sg) cds.fo.scrollTop = cds.fo.sZ + (cds.ym - cds.fo.yZ) / cds.fo.r;
},
/* 在老鼠上 */
m_up : function (e) {
if (!e) e = window.event;
var tg = (e.target) ? e.target : e.srcElement;
/* 清楚皮肤滚动条*/
if (cds.fo) cds.fo.sb.className = (tg.className.indexOf('scrollbar') > 0) ? 'cds_scrollbar cds_scrollbar_over' : 'cds_scrollbar';
document.onselectstart = '';
cds.clr();
cds.fo.sg = false;
},
/* 清除 */
clr : function () {
clearTimeout(cds.to);
cds.sc = 0;
return false;
},
/* 刷新所有滚动条 */
refresh : function () {
for (var i = 0, N = cds.N; i < N; i++) {
var o = cds.O[i];
o.v_scroll();
o.sb.style.width = o.st.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.w + 'px';
o.sb.style.height = Math.ceil(Math.max(o.w * .5, o.r * o.offsetHeight) + 1) + 'px';
}
},
/*箭头滚动循环 */
a_scroll : function () {
if (cds.sc != 0) {
cds.fo.scrollTop += 6 * cds.sc / cds.fo.r;
cds.to = setTimeout(cds.a_scroll, cds.sp);
cds.sp = 32;
}
},
/* 开始箭头滚动*/
m_down : function (o, s) {
if (cds.sc == 0) {
o.dv.sb.className = 'cds_scrollbar cds_scrollbar_pushed';
cds.fo = o.dv;
cds.sc = s;
cds.sp = 400;
cds.a_scroll();
}
},
/* init script */
init : function () {
if (window.oper || (!window.addEventListener && !window.attachEvent)) { this.ok = false; return; }
/* 添加事件*/
function addEvent (o, e, f) {
if (window.addEventListener) { o.addEventListener(e, f, false); cds.w3c = true; return true; }
if (window.attachEvent) return o.attachEvent('on' + e, f);
return false;
}
this.ok = addEvent(window.document, 'mousemove', cds.m_move);
this.ok = addEvent(window.document, 'mouseup', cds.m_up);
this.ok = addEvent(window, 'resize', cds.refresh);
return this.ok;
},
/* 添加滚动条 */
add : function (id) {
/* get div */
var dv = document.getElementById(id);
/* init script */
if (!cds.ok) cds.init();
/* return on error */
if (!cds.ok || !dv) return false;
/* append div function */
function cDiv (c) {
var o = document.createElement('div');
o.dv = dv;
o.className = c;
dc.appendChild(o);
return o;
}
/* 克隆原来的div来创建一个空的容器 */
var dc = dv.cloneNode(false);
dc.style.overflow = "hidden";
/* 插入到div的父容器 */
dv.parentNode.appendChild(dc);
/* 移动原始DIV到容器 */
dc.appendChild(dv);
/* 修改其定位放入容器 */
dv.style.position = 'absolute';
dv.style.left = dv.style.top = '0px';
dv.style.width = dv.style.height = '100%';
/* 推阵的div的参考*/
cds.O[cds.N++] = dv;
dv.sg = false;
/* 创造和容器添加皮肤的滚动条HTML元素,最原始的div */
dv.st = cDiv('cds_track');
dv.sb = cDiv('cds_scrollbar');
dv.su = cDiv('cds_up');
dv.sd = cDiv('cds_down');
/* scrollbar on mouse down */
dv.sb.onmousedown = function (e) {
if (!this.dv.sg) {
if (!e) e = window.event;
/* save active/scrollable div */
cds.fo = this.dv;
/* save vertical mouse and scroll position */
this.dv.yZ = e.screenY;
this.dv.sZ = dv.scrollTop;
this.dv.sg = true;
/* pushed skin */
this.className = 'cds_scrollbar cds_scrollbar_pushed';
document.onselectstart = function () { return false; }
}
return false;
}
/* track on mouse down */
dv.st.onmousedown = function (e) {
if (!e) e = window.event;
/* save active/scrollable div */
cds.fo = this.dv;
/* calculate scrollbar position */
cds.ym = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
for (var o = this.dv, y = 0; o != null; o = o.offsetParent) y += o.offsetTop;
this.dv.scrollTop = (cds.ym - y - (this.dv.r * this.dv.offsetHeight / 2) - this.dv.w) / this.dv.r;
this.dv.sb.onmousedown(e);
}
/* arrows on mouse down */
dv.su.onmousedown = dv.su.ondblclick = function (e) { cds.m_down(this, -1); return false; }
dv.sd.onmousedown = dv.sd.ondblclick = function (e) { cds.m_down(this, 1); return false; }
/* release events */
dv.su.onmouseout = dv.su.onmouseup = cds.clr;
dv.sd.onmouseout = dv.sd.onmouseup = cds.clr;
/* scrollbar on mouse over skin */
dv.sb.onmouseover = function (e) {
if (!this.dv.sg) this.className = 'cds_scrollbar cds_scrollbar_over';
return false;
}
/* scrollbar on mouse out (default) skin */
dv.sb.onmouseout = function (e) {
if (!this.dv.sg) this.className = 'cds_scrollbar';
return false;
}
/* scrollbar repositionning */
dv.v_scroll = function () {
this.r = (this.offsetHeight - 2 * this.w) / this.scrollHeight;
this.sb.style.top = Math.floor(this.w + this.scrollTop * this.r) + 'px';
}
/* calculate scrollbar width */
dv.w = dv.offsetWidth - dv.clientWidth + 1;
/* init scroll */
dv.v_scroll();
cds.refresh();
/* hook on scroll browser's event */
dv.onscroll = dv.v_scroll;
return dv;
}
}
onload = function() {
/* init scrollbars */
cds.add('screen');
cds.add('screen2');
}

</script>

 

“`