运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<judul></judul>
<gaya tipe="teks/css">
* { batas:0; bantalan:0; }
badan { margin:20px 0 400px 20px; jenis huruf:12px Arial; }
h1 { ukuran font:14px; }
ol,ul { margin:20 piksel; tinggi garis:160%; }
ul li { warna:#f00; }
.a1 { lebar:300 piksel; tinggi:190 piksel; batas:1 piksel padat #f00; overflow:otomatis; }
.a2 { lebar:600 piksel; tinggi:350 piksel; margin:100 piksel 0 100 piksel 80 piksel; batas:1 piksel padat #369; latar belakang:#eee url( );
}
.dumascroll_bar {
posisi:mutlak;
atas:0;
kanan:0;
indeks-z:9;
lebar:14 piksel;
tinggi:100%;
kursor:standar;
-moz-pengguna-pilih: tidak ada;
-khtml-pilih-pengguna: tidak ada;
pilih pengguna: tidak ada;
latar belakang-ulangi:ulangi-y;
posisi latar belakang:-42px 0;
mengapung:kiri;
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
posisi:mutlak;
kiri:0;
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
lebar:100%;
tinggi:14 piksel;
warna:#fff;
perataan teks:tengah;
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a { atas:0; }
.dumascroll_arrow_down,.dumascroll_arrow_down_a { bawah:0; }
.dumascroll_handle,.dumascroll_handle_a { lebar:100%; latar belakang-ulangi:ulangi-y; }
.dumascroll_arrow_up { posisi latar belakang:0 0; }
.dumascroll_arrow_up_a { posisi latar belakang:-14px 0; }
.dumascroll_handle { posisi latar belakang:-28px 0; }
.dumascroll_handle_a { posisi latar belakang:-56px 0; }
.dumascroll_arrow_down { posisi latar belakang:-70px 0; }
.dumascroll_arrow_down_a { posisi latar belakang:-84px 0; }
</gaya>
<skrip>
var pemikiran = {
$:fungsi(o){ if(document.getElementById(o)) {kembalikan dokumen.getElementById(o);} },
getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
getOffset:fungsi(o) {
var t = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
return { atas:t, tinggi:h };
},
ikat:fungsi(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; }
},
stopEvent:fungsi(e) {
e = e || jendela.acara;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = benar,e.returnValue = salah);
},
setCookie:fungsi(c_name,value,expiredays) {
var exdate = Tanggal baru();
exdate.setDate(exdate.getDate() + hari kadaluwarsa);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
},
getCookie:fungsi(c_name) {
if(dokumen.cookie.panjang > 0) {
c_start = dokumen.cookie.indexOf(c_name + "=");
jika(c_mulai != -1) {
c_start = c_start + c_name.panjang + 1;
c_end = dokumen.cookie.indexOf(";",c_start);
if(c_end == -1) { c_end = dokumen.cookie.length; }
return unescape(dokumen.cookie.substring(c_start,c_end));
}
}
kembali "";
}
};
duma.BeautifyScrollBar = function(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) {
ini.arrowUpInterval;
ini.arrowDownInterval;
this.barMouseDownInterval;
ini.relY;
this.id = obj;
this.obj = duma.$(ini.id);
ini.setObjCss(); // 预先设置父容器的css定位才能让接下来的属性设置起作用
this.obj.innerHTML = '<div id="' + obj + 'Area" class="dumascroll_area">' + this.obj.innerHTML + '</div><div id="' + obj + 'Bar" class="dumascroll_bar"><div class="dumascroll_arrow_up"></div><div class="dumascroll_handle"></div><div class="dumascroll_arrow_down"></div></div>';
this.area = duma.$(obj + "Area");
this.bar = duma.$(obj + "Bar");
ini.barPos;
this.arrowUp = this.bar.getElementsByTagName("div")[0];
this.arrowUpCss = panahUpCss;
this.arrowUpActiveCss = panahUpActiveCss;
this.handle = this.bar.getElementsByTagName("div")[1];
ini.handleCss = handleCss;
this.handleActiveCss = handleActiveCss;
this.arrowDown = this.bar.getElementsByTagName("div")[2];
this.panahDownCss = panahDownCss;
this.arrowDownActiveCss = panahDownActiveCss;
this.handleMinHeight = 15;
this.arrowUpHeight = parseInt(duma.getStyle(this.arrowUp).height);
this.arrowDownHeight = parseInt(duma.getStyle(this.arrowDown).height);
this.areaScrollHeight = ini.area.scrollHeight;
this.handleHeight = parseInt(this.area.offsetHeight/this.area.scrollHeight * (this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight));
}
duma.BeautifyScrollBar.prototipe = {
setObjCss:fungsi() {
duma.getStyle(ini.obj).posisi == "statis" ? this.obj.style.position = "relatif" : duma.getStyle(this.obj).backgroundColor == "transparan" ? this.obj.style.backgroundColor = "#fff" : null; //posisi, posisi relatif, posisi relatif;
},
sethandle:function() { //当内容超多时设置拖拽条子的最小高度
this.handle.style.top = this.arrowUpHeight + "px";
if(ini.handleHeight > ini.handleMinHeight) {
this.handleHeight < this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight ? this.handle.style.height = this.handleHeight + "px" : this.handle.style.display = "none";
}
else { this.handleHeight = this.handleMinHeight; this.handle.style.height = ini.handleMinHeight + "px"; }
},
setBarPos:function() { //将当前滚动的距离值存入cookie
this.barPos = ini.area.scrollTop + "";
duma.setCookie(ini.id + "Nama Kue",ini.barPos,1);
},
getBarPos:fungsi() {
this.barPos = duma.getCookie(ini.id + "Nama Kue");
if(ini.barPos!=null && ini.barPos!="") {
this.area.scrollTop = ini.barPos;
ini.areaScroll();
}
},
clearArrowUpInterval:fungsi() { clearInterval(ini.arrowUpInterval); },
clearArrowDownInterval:fungsi() { clearInterval(ini.arrowDownInterval); },
clearBarMouseDownInterval:fungsi() { clearInterval(ini.barMouseDownInterval); },
gulir area:fungsi() {
this.handle.style.display != "tidak ada" ? this.handle.style.top = this.area.scrollTop/(this.area.scrollHeight - this.area.offsetHeight) * (this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight) + ini. panahUpHeight + "px" : null;
},
areakeydown:function(e) { //支持键盘上下按键
var itu = ini;
dokumen.onkeydown = fungsi(acara) {
var e = kejadian || jendela.acara,
ek = e.Kode Kunci || e.yang mana;
if(ek == 40) { itu.area.scrollTop += 25 }
else if(ek == 38) { itu.area.scrollTop -= 25 }
if(itu.area.scrollTop > 0 && itu.area.scrollTop < itu.area.scrollHeight - itu.area.offsetHeight){ duma.stopEvent(e); }
itu.setBarPos();
}
},
handleMove:fungsi(e) {
var e = e || jendela.acara;
this.area.scrollTop = (e.clientY - this.relY - this.arrowUpHeight)/(this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight)*(this.area.scrollHeight - this.area .offsetHeight);
ini.setBarPos();
},
handleMouseDown:fungsi(e) {
var itu = ini,e = e || jendela.acara;
that.relY = e.clientY - itu.handle.offsetTop;
itu.handle.setCapture ? itu.pegangan.setCapture() : null;
itu.handle.className = itu.handleActiveCss;
dokumen.onmousemove = function(event) { that.handleMove(event); };
dokumen.onmouseup = fungsi() {
itu.handle.className = itu.handleCss;
itu.handle.releaseCapture ? itu.handle.releaseCapture() : null;
dokumen.onmousemove = null;
};
},
barScroll:fungsi(e) {
var e = e || window.acara,eDir; //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C,根据返回值的正负来判断滚动方向
if(e.wheelDelta) { eDir = e.wheelDelta/120; }
else if(e.detail) { eDir = -e.detail/3; }
eDir > 0 ? ini.area.scrollTop -= 80 : ini.area.scrollTop += 80; //步长设80像素比较接近jendela滚动条的滚动速度
if(this.area.scrollTop > 0 && this.area.scrollTop < this.area.scrollHeight - this.area.offsetHeight){ duma.stopEvent(e); }
ini.setBarPos();
},
barBawah:fungsi(e) {
var e = e || window.event,itu = ini,
eY = e.klienY,
mStep = ini.bar.offsetHeight,
documentScrollTop = dokumen.documentElement.scrollTop || dokumen.body.scrollTop,
hOffset = duma.getOffset(pegangan ini),
bOffset = duma.getOffset(bilah ini);
if(documentScrollTop + eY < hOffset.top) { this.barMouseDownInterval = setInterval(fungsi(e){
itu.area.scrollTop -= itu.area.offsetHeight;
if(that.area.scrollTop <= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval( ); }
itu.setBarPos();
},80); }
else if(documentScrollTop + eY > hOffset.top + hOffset.height) { this.barMouseDownInterval = setInterval(function(){
itu.area.scrollTop += itu.area.offsetHeight;
if(that.area.scrollTop >= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight - hOffset.height)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { itu.clearBarMouseDownInterval(); }
itu.setBarPos();
},80); }
duma.stopEvent(e);
},
panahAtasMouseBawah:fungsi(e) {
var itu = ini;
this.arrowUpInterval = setInterval(function(){ that.area.scrollTop -= 25; that.setBarPos(); },10);
this.arrowUp.className = ini.arrowUpActiveCss;
duma.stopEvent(e);
},
panahUpMouseUp:fungsi() { this.clearArrowUpInterval(); this.arrowUp.className = ini.arrowUpCss; },
panahUpMouseOut:fungsi() { this.clearArrowUpInterval(); this.arrowUp.className = ini.arrowUpCss; },
panahBawahMouseBawah:fungsi(e) {
var itu = ini;
this.arrowDownInterval = setInterval(function(){ that.area.scrollTop += 25; that.setBarPos(); },10);
this.arrowDown.className = ini.arrowDownActiveCss;
duma.stopEvent(e);
},
panahDownMouseUp:fungsi() { this.clearArrowDownInterval(); this.arrowDown.className = ini.arrowDownCss; },
panahDownMouseOut:fungsi() { this.clearArrowDownInterval(); this.arrowDown.className = ini.arrowDownCss; },
jalankan:fungsi(){
var itu = ini;
ini.sethandle();
ini.areaScroll();
ini.getBarPos();
this.area.onscroll = function(){itu.areaScroll()};
this.area.onmouseover = this.bar.onmouseover = function(event){that.areakeydown(event)};
this.area.onmouseout = this.bar.onmouseout = function(){document.onkeydown = null};
this.handle.onmousedown = function(event){that.handleMouseDown(event)};
this.bar.onmousedown = function(event){that.barDown(event)};
this.bar.onmouseup = function(){itu.clearBarMouseDownInterval()};
this.bar.onmouseout = function(){itu.clearBarMouseDownInterval()};
this.arrowUp.onmousedown = function(event){that.arrowUpMouseDown(event)};
this.arrowUp.onmouseup = function(){itu.arrowUpMouseUp()};
this.arrowUp.onmouseout = function(){itu.arrowUpMouseOut()};
this.arrowDown.onmousedown = function(event){that.arrowDownMouseDown(event)};
this.arrowDown.onmouseup = function(){itu.arrowDownMouseUp()};
this.arrowDown.onmouseout = function(){itu.arrowDownMouseOut()};
duma.bind(this.obj,"mousewheel",function(event){that.barScroll(event)});
duma.bind(ini.obj,"DOMMouseScroll",function(event){that.barScroll(event)});
}
}
duma.BeautifyScrollBar.init = fungsi() {
var o = dokumen.getElementsByTagName("div"),
oLen = o.panjang,
dumascrollClass = /bdumascrollb/,
oArr = [],
oArrLen = oArr.panjang;
untuk(var i=0; i<oLen; i++) {
if(dumascrollClass.test(o[i].className)) {
oArr.push("dumaScrollAreaId_"+i);
oArrLen = oArr.panjang;
o[i].id = oArr[oArrLen - 1];
}
}
untuk(var j=0; j<oArrLen; j++) {
duma baru.BeautifyScrollBar(oArr[j],"dumascroll_arrow_up","dumascroll_arrow_up_a","dumascroll_handle","dumascroll_handle_a","dumascroll_arrow_down","dumascroll_arrow_down_a").run();
}
}
duma.bind(window,"load",duma.BeautifyScrollBar.init);
</skrip>
</kepala>
<tubuh>
<div class="a dumascroll b" style="width:300px; height:190px; padding:5px; border:1px solid #f00; line-height:400%; overflow:hidden;">
<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br / >我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br /> <br />我是第一个被渲染的，真不幸<br />我是第一个被渲染的，真不幸<br / >我是第一个被渲染的,真不幸<br />我是第一个被渲染的,真不幸<br />
</div>
<div class="a dumfaf" style="width:400px; height:100px; margin:20px; border:2px inset #eee; overflow:auto;">
我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br />
我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样？哈哈哈！<br />我还是普通的，我不希kelas 望被渲染,我就不用你的,拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br />我还是普通的,我不希望被渲染,kelas baru,kelas,kelas,kelas,,,,,,,,,,,怎么样？哈哈哈！<br /> kelas 我还是普通的,我不希望被渲染,我就不用你的,拿我怎么样？哈哈哈！<br />被渲染,我就不用你的class ,拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br />我还是普通的，我不希kelas 望被渲染,我就不用你的,拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！< saudara />
</div>
<div class="a dumascroll" style="width:780px; height:350px; margin:20px; border:1px solid #369; latar belakang:#eee url( http://bbs.blueidea.com/thread-2936181- 1-3.html " target="">以往版本</a></li>
</ol>
<h2>将来版本可继续扩展的功能有：</h2>
<ul>
<li>增加空格键的“下方向”快速滚动支持（更好地模拟windows滚动条用户体验）</li>
<li>增加页面tubuh的渲染支持</li>
<li>增加textarea的渲染支持</li>
<li>增加嵌套div的渲染支持（目前代码嵌套时有滚动的bug，被嵌套的div的滚动高度算法到这个版本时将大幅修改）</li>
<li>增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）</li>
</ul>
<p>bug dalam bahasa Inggris, bug, dll., 谢谢（QQ：149561420,gTalk： gmail.com ）。</p>
</tubuh>
</html>
图片自定义滚动条3.0（Duma“自动渲染版”，也许世间万物都会变，但是真挚的爱，却永远留存在心中）
将来版本可继续扩展的功能有：