运行代码框

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<头>

<标题>
<样式类型=“文本/css”>
* { 边距：0;填充：0； }
正文 { 边距：20px 0 400px 20px;字体：12px Arial； }
h1 { 字体大小：14px; }
ol，ul { 边距：20px;行高：160%； }
ul li { 颜色:#f00; }
.a1 { 宽度：300px;高度：190 像素；边框：1px实心#f00；溢出：自动； }
.a2 { 宽度：600px;高度：350px；边距：100px 0 100px 80px；边框：1px实心#369；背景：#eee url( );
}
.dumascroll_bar {
位置：绝对；
顶部：0；
右：0；
z 索引：9；
宽度：14px；
高度：100%；
光标：默认；
-moz-用户选择：无；
-khtml-用户选择：无；
用户选择：无；
背景重复：重复-y；
背景位置：-42px 0；
浮动：左；
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
位置：绝对；
左：0；
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
宽度：100%；
高度：14px；
颜色：#fff；
文本对齐：居中；
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a { 顶部:0; }
.dumascroll_arrow_down,.dumascroll_arrow_down_a { 底部:0; }
.dumascroll_handle,.dumascroll_handle_a { 宽度:100%;背景重复：重复-y； }
.dumascroll_arrow_up { 背景位置：0 0; }
.dumascroll_arrow_up_a { 背景位置：-14px 0; }
.dumascroll_handle { 背景位置：-28px 0; }
.dumascroll_handle_a { 背景位置：-56px 0; }
.dumascroll_arrow_down { 背景位置：-70px 0; }
.dumascroll_arrow_down_a { 背景位置：-84px 0; }

<脚本>
var 杜马 = {
$:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} },
getStyle:function(o) { return o.currentStyle||document.defaultView.getCompulatedStyle(o,null); },
获取偏移量：函数（o）{
var t = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
返回 { 顶部：t，高度：h }；
},
绑定：函数（o，eType，fn）{
if(o.addEventListener) { o.addEventListener(eType,fn,false); }
else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
else { o["on" + eType] = fn; }
},
停止事件：函数（e）{
e = e ||窗口.事件;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
},
setCookie:function(c_name,value,expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + 过期天数);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
},
getCookie:函数(c_name) {
if(document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
如果（c_start！= -1）{
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";",c_start);
if(c_end == -1) { c_end = document.cookie.length; }
返回 unescape(document.cookie.substring(c_start,c_end));
}
}
返回 ””;
}
};
duma.BeautifyScrollBar = 函数(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) {
this.arrowUpInterval;
this.arrowDownInterval;
this.barMouseDownInterval;
这个.relY;
这个.id = obj;
this.obj = 杜马.$(this.id);
this.setObjCss(); // 预先设置父容器的css定位才能进行后续的属性设置
this.obj.innerHTML = '

1. 支持任意形式（包括图片自定义）的美化扩展，跨浏览器支持


2. 支持鼠标按住上、下箭按钮实现上下滚动


3. 支持鼠标滚轮放于“滚动条区”滚动，而不仅限放于滚动内容区才滚


4. 支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动


5. 滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子


6. 支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）


7. 支持键盘上下方向键，滚动区滚完之后才轮到页面body滚


8. 支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie）


9. 鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚


10. 在原来几个版本基础上代码重构，这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染，而不设此class的不受影响


11. 修复了以往版本所发现的bug：http://bbs.blueidea.com/thread-2936181- 1-3.html " target="">以往版本

未来版本可继续扩展的功能有：

• 增加空格键的“下方向”快速滚动支持（更好地模拟windows滚动条用户体验）


• 增加页面body的渲染支持


• 增加textarea的渲染支持


• 增加身高div的渲染支持（目前代码轮廓时有滚动的bug，被增加的div的滚动高度算法到这个版本时将大幅修改）


• 增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）

大家期待着寻找新bug并提出宝贵建议，相信下一个版本会做的更好，谢谢（QQ：149561420，gTalk： [email protected] ）。

图片自定义滚动条3.0（Duma“自动渲染版”，也许世间万物都会变，但真挚的爱，却永远留存在心中！）

1. 支持任何形式（包括图片自定义）的美化扩展，跨浏览器支持
2. 支持鼠标控制上、下箭头按钮实现上下滚动
3. 支持滚动鼠标轮放于“滚动条区”滚动，而不是仅限放于滚动内容区才滚动
4. 支持鼠标控制滚动条（未拖动）并移出滚动区域仍然能拖拽滚动条
5. 滚动条子根据左侧滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值，内容过少时隐藏滚动条子
6. 支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）
7. 支持键盘上下方向键，滚动区滚动完之后才轮到页面正文滚动
8. 支持页面刷新后保留滚动条滚动位置（需要浏览器支持或打开cookie）
9. 鼠标放于自定义滚动区滚动轮，滚动区滚动完之后才轮到页面body滚动
10. 在原来版本的几个基础上代码重构中，这只需在渲染的div里追加一个名为“dumascroll”的类就可以自动渲染，而不需要设置这个类的不往返
11. 修复了以往版本所发现的bug：以往版本

未来版本可继续扩展的功能有：

• 增加空格键的“下方向”快速滚动支持（更好地模拟windows滚动条用户体验）
• 增加页面body的渲染支持
• 增加textarea的渲染支持
• 增加轮廓div的渲染支持（目前代码轮廓时有滚动的bug，被轮廓的div的滚动高度算法到这个版本时将大幅修改）
• 增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）