运行代码框

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




* { margen:0; relleno: 0; }
cuerpo { margen:20px 0 400px 20px; fuente: 12px Arial; }
h1 {tamaño de fuente:14px; }
ol,ul { margen:20px; altura de línea: 160%; }
ul li {color:#f00; }
.a1 {ancho:300px; altura: 190 px; borde: 1px sólido #f00; desbordamiento:automático; }
.a2 {ancho:600px; altura: 350 px; margen:100px 0 100px 80px; borde: 1px sólido #369; fondo:#eee url( );
}
.dumascroll_bar {
posición:absoluta;
arriba: 0;
derecha: 0;
índice z: 9;
ancho: 14px;
altura: 100%;
cursor: predeterminado;
-moz-user-select:ninguno;
-khtml-user-select:ninguno;
selección de usuario: ninguna;
repetición de fondo: repetición-y;
posición de fondo: -42px 0;
flotador: izquierda;
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
posición:absoluta;
izquierda: 0;
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
ancho: 100%;
altura: 14px;
color:#fff;
alineación de texto:centro;
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a { arriba:0; }
.dumascroll_arrow_down,.dumascroll_arrow_down_a {parte inferior:0; }
.dumascroll_handle,.dumascroll_handle_a { ancho:100%; repetición de fondo: repetición-y; }
.dumascroll_arrow_up { posición-fondo:0 0; }
.dumascroll_arrow_up_a { posición-fondo:-14px 0; }
.dumascroll_handle { posición-fondo:-28px 0; }
.dumascroll_handle_a { posición-fondo:-56px 0; }
.dumascroll_arrow_down { posición-fondo:-70px 0; }
.dumascroll_arrow_down_a { posición-fondo:-84px 0; }


var duma = {
$:función(o){ if(document.getElementById(o)) {return document.getElementById(o);} },
getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
getOffset: función (o) {
var t = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
return {arriba:t, altura:h};
},
enlazar: función (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; }
},
detenerEvento:función(e) {
mi = mi || ventana.evento;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = verdadero,e.returnValue = falso);
},
setCookie:función(c_name,valor,días de vencimiento) {
var exdate = nueva fecha();
exdate.setDate(exdate.getDate() + días de caducidad);
document.cookie = c_name + "=" + escape(valor) + ((expiredays == null)? "" : ";expires=" + exdate.toGMTString());
},
obtenerCookie:función(c_name) {
if(documento.cookie.longitud > 0) {
c_start = document.cookie.indexOf(c_name + "=");
si(c_start!= -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";",c_start);
if(c_end == -1) { c_end = documento.cookie.length; }
devolver unescape(document.cookie.substring(c_start,c_end));
}
}
devolver "";
}
};
duma.BeautifyScrollBar = function(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) {
this.arrowUpInterval;
this.arrowDownInterval;
this.barMouseDownInterval;
esto.rely;
this.id = obj;
this.obj = duma.$(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. 支持键盘上下方向键，滚动区滚完之后才轮到页面body滚
8. 支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie）
9. 鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚
10. Dumascroll不设此clase的不受影响
11. 修复了以往版本所发现的error:以往版本

将来版本可继续扩展的功能有:

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