運行程式碼框
<!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 ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<標題></標題>
<樣式類型=“文字/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 = '<div id="' + obj + '區域" 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 + "面積");
this.bar = duma.$(obj + "Bar");
this.barPos;
this.arrowUp = this.bar.getElementsByTagName("div")[0];
this.arrowUpCss = arrowUpCss;
this.arrowUpActiveCss = arrowUpActiveCss;
this.handle = this.bar.getElementsByTagName("div")[1];
this.handleCss =handleCss;
this.handleActiveCss =handleActiveCss;
this.arrowDown = this.bar.getElementsByTagName("div")[2];
this.arrowDownCss = arrowDownCss;
this.arrowDownActiveCss = arrowDownActiveCss;
this.handleMinHeight = 15;
this.arrowUpHeight = parseInt(duma.getStyle(this.arrowUp).height);
this.arrowDownHeight = parseInt(duma.getStyle(this.arrowDown).height);
this.areaScrollHeight = this.area.scrollHeight;
this.handleHeight = parseInt(this.area.offsetHeight/this.area.scrollHeight * (this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight));
}
duma.BeautifyScrollBar.prototype = {
setObjCss:函數() {
duma.getStyle(this.obj).position == "static" ？ this.obj.style.position = "相對" : duma.getStyle(this.obj).backgroundColor == "透明" ? this.obj.style.backgroundColor = "#fff" : null; //若容器本來就沒有設定位置，則初始化為相對；若容器原來未設定背景色，則初始化為白色；
},
sethandle:function() { //當內容超多時設定拖曳條子的最小高度
this.handle.style.top = this.arrowUpHeight + "px";
if(this.handleHeight > this.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 = this.handleMinHeight + "px"; }
},
setBarPos:function() { //將目前滾動的距離值存入cookie
this.barPos = this.area.scrollTop + "";
duma.setCookie(this.id + "CookieName",this.barPos,1);
},
getBarPos:函數() {
this.barPos = duma.getCookie(this.id + "CookieName");
if(this.barPos!=null && this.barPos!="") {
this.area.scrollTop = this.barPos;
this.areaScroll();
}
},
clearArrowUpInterval:function() {clearInterval(this.arrowUpInterval); },
clearArrowDownInterval:function() {clearInterval(this.arrowDownInterval); },
clearBarMouseDownInterval:function() {clearInterval(this.barMouseDownInterval); },
區域滾動：函數（）{
this.handle.style.display！ this.handle.style.top = this.area.scrollTop/(this.area.scrollHeight - this.area.offsetHeight) * (this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight) + this.handleHeight - this.arrowUpHeight - this.arrowDownHeight) + this. arrowUpHeight + "px" : null;
},
areakeydown:function(e) { //支援鍵盤上下按鍵
var that = this;
document.onkeydown = 函數(事件) {
var e = 事件 ||視窗事件，
ek = e.keyCode || e.其中；
if(ek == 40) { that.area.scrollTop += 25 }
else if(ek == 38) { that.area.scrollTop -= 25 }
if(that.area.scrollTop > 0 && that.area.scrollTop < that.area.scrollHeight - that.area.offsetHeight){ duma.stopEvent(e); } }
that.setBarPos();
}
},
處理移動：函數（e）{
var e = e ||視窗.事件;
this.area.scrollTop = (e.clientY - this.relY - this.arrowUpHeight)/(this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight)*(this.area.scrollHeight -this.Height - this.arrowDownHeight)*(this.area.scrollHeight -this.Height - this.arrowDownHeight)*(this.area.scrollHeight - .Harea .offsetHeight);
this.setBarPos();
},
處理MouseDown：函數（e）{
var that = this,e = e ||視窗.事件;
that.relY = e.clientY - that.handle.offsetTop;
that.handle.setCapture ？ that.handle.setCapture() : null;
that.handle.className = that.handleActiveCss;
document.onmousemove = function(event) { that.handleMove(event); };
document.onmouseup = 函數() {
that.handle.className = that.handleCss;
that.handle.releaseCapture ？ that.handle.releaseCapture() : null;
document.onmousemove = null;
};
},
barScroll: 函數(e) {
var e = e ||窗口.事件，eDir； //設定滾輪事件,e.wheelDelta與e.detail分別相容IE、W3C，根據回傳值的正負來判斷滾動方向
if(e.wheelDelta) { eDir = e.wheelDelta/120; }
else if(e.detail) { eDir = -e.detail/3; }
eDir > 0 ? this.area.scrollTop -= 80 : this.area.scrollTop += 80; //步長設定80像素比較接近視窗滾動條的滾動速度
if(this.area.scrollTop > 0 && this.area.scrollTop < this.area.scrollHeight - this.area.offsetHeight){ duma.stopEvent(e); } }
this.setBarPos();
},
barDown:函數(e) {
var e = e || window.event,that = this,
eY = e.clientY,
mStep = this.bar.offsetHeight,
documentScrollTop = document.documentElement.scrollTop ||文檔.body.scrollTop,
hOffset = duma.getOffset(this.handle),
bOffset = duma.getOffset(this.bar);
if(documentScrollTop + eY < hOffset.top) { this.barMouseDownInterval = setInterval(function(e){
that.area.scrollTop -= that.area.offsetHeight;
if(that.area.scrollTop <= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.IntervalpMoownownDown. ）； }
that.setBarPos();
},80); }
else if(documentScrollTop + eY > hOffset.top + hOffset.height) { this.barMouseDownInterval = setInterval(function(){
that.area.scrollTop += that.area.offsetHeight;
if(that.area.scrollTop >= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight - hOffset.height)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.offsetHeight - that。 that.clearBarMouseDownInterval(); }
that.setBarPos();
},80); }
杜馬.stopEvent(e);
},
arrowUpMouseDown:函數(e) {
var that = this;
this.arrowUpInterval = setInterval(function(){ that.area.scrollTop -= 25; that.setBarPos(); },10);
this.arrowUp.className = this.arrowUpActiveCss;
杜馬.stopEvent(e);
},
arrowUpMouseUp:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },
arrowUpMouseOut:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },
arrowDownMouseDown：函數（e）{
var that = this;
this.arrowDownInterval = setInterval(function(){ that.area.scrollTop += 25; that.setBarPos(); },10);
this.arrowDown.className = this.arrowDownActiveCss;
杜馬.stopEvent(e);
},
arrowDownMouseUp:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },
arrowDownMouseOut:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },
運行：函數（）{
var that = this;
this.sethandle();
this.areaScroll();
this.getBarPos();
this.area.onscroll = function(){that.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(){that.clearBarMouseDownInterval()};
this.bar.onmouseout = function(){that.clearBarMouseDownInterval()};
this.arrowUp.onmousedown = function(event){that.arrowUpMouseDown(event)};
this.arrowUp.onmouseup = function(){that.arrowUpMouseUp()};
this.arrowUp.onmouseout = function(){that.arrowUpMouseOut()};
this.arrowDown.onmousedown = function(event){that.arrowDownMouseDown(event)};
this.arrowDown.onmouseup = function(){that.arrowDownMouseUp()};
this.arrowDown.onmouseout = function(){that.arrowDownMouseOut()};
duma.bind(this.obj,"滑鼠滾輪",function(event){that.barScroll(event)});
duma.bind(this.obj,"DOMMouseScroll",function(event){that.barScroll(event)});
}
}
duma.BeautifyScrollBar.init = function() {
var o = document.getElementsByTagName("div"),
oLen = o.長度，
dumascrollClass = /bdumascrollb/,
oArr = [],
oArrLen = oArr.length;
for(var i=0; i<oLen; i++) {
if(dumascrollClass.test(o[i].className)) {
oArr.push("dumaScrollAreaId_" + i);
oArrLen = oArr.length;
o[i].id = oArr[oArrLen - 1];
}
}
for(var j=0; j<oArrLen; j++) {
新 duma.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(視窗,"載入",duma.BeautifyScrollBar.init);
</腳本>
</頭>
<正文>
<div class="a dumascroll b" style="width:300px; height:190px; padding:5px; border:1pxsolid #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;">
我還是普通的，我不希望被渲染，我就不用你的類，拿我怎麼樣？
我還是普通的，我不希望被渲染，我就不用你的類，拿我怎麼樣？ 哈！樣？ 哈！不用你的課，拿我怎麼樣？ 哈！我不希望被渲染，我就不用你的類，拿我怎麼樣？ 哈！的，我不希望被渲染，我就不用你的類，拿我怎麼樣？ 哈 哈！ ！
</div>
<div class="a dumascroll" style="width:780px; height:350px; margin:20px; border:1pxsolid #369;background:#eee url( http://bbs.blueidea.com/thread-2936181- 1 -3.html " target="">以往版本</a></li>
</ol>
<h2>未來版本可繼續擴充的功能有：</h2>
<ul>
<li>增加空白鍵的「下方向」快速捲動支援（更好地模擬windows捲軸使用者體驗）</li>
<li>增加頁面body的渲染支援</li>
<li>增加textarea的渲染支援</li>
<li>增加身高div的渲染支援（目前程式碼輪廓時有滾動的bug，被增加的div的滾動高度演算法到這個版本時將大幅修改）</li>
<li>增加同時出現橫向捲軸的支援（當有這方面需求時可以擴展）</li>
</ul>
<p>大家期待著尋找新bug並提出寶貴建議，相信下一個版本會做的更好，謝謝（QQ：149561420，gTalk： [email protected] ）。
</正文>
</html>
圖片自訂捲軸3.0（Duma“自動渲染版”，也許世間萬物都會變，但真誠的愛，卻永遠留存在心中！）
未來版本可繼續擴充的功能有：