运行代码框
<!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; 높이:190px; 테두리:1px 솔리드 #f00; 오버플로:자동; }
.a2 { 너비:600px; 높이:350px; 여백:100px 0 100px 80px; 테두리:1px 솔리드 #369; 배경:#eee url( );
}
.dumascroll_bar {
위치:절대;
상단:0;
오른쪽:0;
Z-색인:9;
너비:14px;
높이:100%;
커서:기본값;
-moz-user-select:없음;
-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 { top: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; }
</style>
<스크립트>
var 듀마 = {
$:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} },
getStyle:function(o) { return o.currentStyle||document.defaultView.getCompulatedStyle(o,null); },
getOffset:함수(o) {
var t = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
return { 상단: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; }
},
stopEvent:함수(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 + "=");
if(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 = function(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) {
this.arrowUpInterval;
this.arrowDownInterval;
this.barMouseDownInterval;
this.relY;
this.id = obj;
this.obj = duma.$(this.id);
this.setObjCss(); //CSS 정의를 위한 CSS 설정을 아래로 하는 것이 좋습니다.
this.obj.innerHTML = '<div id="' + obj + 'Area" class="dumascroll_area">' + this.obj.innerHTML + '</div><div id="' + obj + '바" 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 + "바");
this.barPos;
this.arrowUp = this.bar.getElementsByTagName("div")[0];
this.arrowUpCss = arrowUpCss;
this.arrowUpActiveCss = arrowUpActiveCss;
this.handle = this.bar.getElementsByTagName("div")[1];
this.handleCss = 핸들Css;
this.handleActiveCss = handlerActiveCss;
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 = parsInt(this.area.offsetHeight/this.area.scrollHeight * (this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight));
}
duma.BeautifyScrollBar.prototype = {
setObjCss:함수() {
duma.getStyle(this.obj).position == "정적" ? this.obj.style.position = "상대적" : duma.getStyle(this.obj).BackgroundColor == "투명" ? this.obj.style.BackgroundColor = "#fff" : null; //若容器本来就没有设position，则初始化为relative;
},
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. arrowUpHeight + "px" : null;
},
Areakeydown:function(e) { //支持键盘上下按键
var = 이것;
document.onkeydown = 함수(이벤트) {
var e = 이벤트 || 창.이벤트,
ek = e.keyCode || 이자형.
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.area .오프셋높이);
this.setBarPos();
},
handlerMouseDown:함수(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 = function() {
that.handle.className = that.handleCss;
that.handle.releaseCapture ? that.handle.releaseCapture() : null;
document.onmousemove = null;
};
},
barScroll:함수(e) {
var e = e || window.event,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; //步长设80image素比较接近창문滚动条的滚动速titude
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.클라이언트Y,
mStep = this.bar.offsetHeight,
documentScrollTop = document.documentElement.scrollTop || document.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.clearBarMouseDownInterval( ); }
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.area.scrollHeight) { that.clearBarMouseDownInterval(); }
that.setBarPos();
},80); }
duma.stopEvent(e);
},
arrowUpMouseDown:함수(e) {
var = 이것;
this.arrowUpInterval = setInterval(function(){ that.area.scrollTop -= 25; that.setBarPos(); },10);
this.arrowUp.className = this.arrowUpActiveCss;
duma.stopEvent(e);
},
arrowUpMouseUp:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },
arrowUpMouseOut:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },
arrowDownMouseDown:함수(e) {
var = 이것;
this.arrowDownInterval = setInterval(function(){ that.area.scrollTop += 25; that.setBarPos(); },10);
this.arrowDown.className = this.arrowDownActiveCss;
duma.stopEvent(e);
},
arrowDownMouseUp:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },
arrowDownMouseOut:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },
실행:함수(){
var = 이것;
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,"mousewheel",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.길이;
for(var i=0; i<oLen; i++) {
if(dumascrollClass.test(o[i].className)) {
oArr.push("dumaScrollAreaId_" + i);
oArrLen = oArr.길이;
o[i].id = oArr[oArrLen - 1];
}
}
for(var j=0; j<oArrLen; j++) {
new 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(window,"load",duma.BeautifyScrollBar.init);
</script>
</head>
<본문>
<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 />
</div>
<div class="a dumfaf" style="너비:400px; 높이:100px; 여백:20px; 테두리:2px 삽입 #eee; 오버플로:자동;">
나는 정말 평범하고, 나는 좋아하지 않는 수업이고, 나는 사용하지 않는 수업이고, 拿我怎么样?哈哈哈!<br />
나는 일반적이지 않습니다. 나는 일반적이지 않습니다. 나는 사용하지 않는 수업입니다. 拿我怎么样?哈哈哈!<br />나는 일반적이고 사용하기 어려운 수업입니다.怎么样?哈哈哈!<br />저는 평범하지 않습니다. 저는 좋아하지 않습니다. 저는 사용하지 않는 수업을 좋아합니까? 哈哈哈!<br />저는 평범하지 않습니다.染，나는 사용하지 않는 수업, 拿我怎么样?哈哈哈!<br />내가 사용하지 않는 수업, 나는 사용하지 않는 수업, 拿我怎么样?哈哈哈!<br /> 나는 정말 평범하고, 내가 좋아하지 않는 수업, 내가 사용하지 않는 수업, 拿我怎么样?哈哈哈!<br />被渲染, 내가 사용하지 않는 수업, 拿我怎么样?哈哈哈!<br />나는 일반적이지 않습니다. 나는 일반적이지 않습니다. 나는 사용하지 않는 수업입니다. 나는 사용하지 않는 수업입니다.<br />나는 일반적이지 않으며 사용하지 않는 수업입니다.拿我怎么样?哈哈哈!<br />我还是普哈,我不希望被渲染,我就不就么样, 拿我怎么样?哈哈哈!<br />
</div>
<div class="a dumascroll" style="width:780px; height:350px; margin:20px; border:1px solid #369; background:#eee url( http://bbs.blueidea.com/thread-2936181- 1-3.html " target="">以往版本</a></li>
</ol>
<h2>将来版本可继续扩 확장된 광고가 있습니다 :</h2>
<ul>
<li>'下方向'快速滚动支持（更好地模拟windows滚动条用户体验）</li>
<li>바디바디의 측면</li>
<li>텍스트 영역의 확장</li>
<li>이전의 혁신적인 버그가 발견되었습니다.</li>
<li>동종 판매</li>
</ul>
<p>期待大家帮忙寻找newbug并提流宝贵建议, 相信下一版本将做的更好，谢谢（QQ：149561420，gTalk： [email protected] ）。</p>
</body>
</html>
图文 义滚动条3.0（Duma“自动渲染版”，也许世间万물 都会变，但是真挚的爱，却永远留存재심중！）
将来版本可继续扩展의功能有：