运行代码框
<!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" />
<title></title>
<style type="text/css">
* { маржа:0; дополнение: 0; }
тело { маржа: 20 пикселей 0 400 пикселей 20 пикселей; шрифт: Arial 12 пикселей; }
h1 {размер шрифта: 14 пикселей; }
ол,ул {маржа:20px; высота строки: 160%; }
ул ли {color:#f00; }
.a1 { ширина:300 пикселей; высота: 190 пикселей; граница: 1 пиксель, сплошной #f00; переполнение: авто; }
.a2 { ширина:600 пикселей; высота: 350 пикселей; поле: 100 пикселей 0 100 пикселей 80 пикселей; граница: 1 пиксель, сплошной # 369; фон:#eee URL( );
}
.dumascroll_bar {
позиция: абсолютная;
верх: 0;
правильно: 0;
z-индекс: 9;
ширина: 14 пикселей;
высота: 100%;
курсор: по умолчанию;
-moz-user-select: нет;
-khtml-user-select: нет;
выбор пользователя: нет;
фон-повторение: повторение-у;
фоновая позиция:-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%;
высота: 14 пикселей;
цвет: #fff;
выравнивание текста: по центру;
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a { top:0; }
.dumascroll_arrow_down,.dumascroll_arrow_down_a {дно:0; }
.dumascroll_handle,.dumascroll_handle_a { ширина:100%; фон-повторение: повторение-у; }
.dumascroll_arrow_up {background-position:0 0; }
.dumascroll_arrow_up_a {background-position:-14px 0; }
.dumascroll_handle {background-position:-28px 0; }
.dumascroll_handle_a {background-position:-56px 0; }
.dumascroll_arrow_down {background-position:-70px 0; }
.dumascroll_arrow_down_a {background-position:-84px 0; }
</стиль>
<скрипт>
вар дума = {
$:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} },
getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); },
getOffset:function(o) {
вар т = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
возврат {верх: т, высота: ч};
},
привязка: функция (о, eType, fn) {
if(o.addEventListener) { o.addEventListener(eType,fn,false); }
иначе if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
еще { o["on" + eType] = fn; }
},
stopEvent: функция (е) {
е = е || окно.событие;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
},
setCookie:function(c_name,value,expiredays) {
вар exdate = новая дата ();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
},
getCookie: функция (c_name) {
если (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
если(c_start != -1) {
c_start = c_start + c_name.длина + 1;
c_end = document.cookie.indexOf(";",c_start);
if(c_end == -1) { c_end = document.cookie.length; }
return unescape(document.cookie.substring(c_start,c_end));
}
}
возвращаться "";
}
};
duma.BeautifyScrollBar = function(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) {
this.arrowUpInterval;
this.arrowDownInterval;
this.barMouseDownInterval;
это.relY;
this.id = объект;
this.obj = дума.$(this.id);
this.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 + «Площадь»);
this.bar = duma.$(obj + "Бар");
это.barPos;
this.arrowUp = this.bar.getElementsByTagName("div")[0];
this.arrowUpCss = стрелкаUpCss;
this.arrowUpActiveCss = стрелкаUpActiveCss;
this.handle = this.bar.getElementsByTagName("div")[1];
this.handleCss = handleCss;
this.handleActiveCss = handleActiveCss;
this.arrowDown = this.bar.getElementsByTagName("div")[2];
this.arrowDownCss = стрелкаDownCss;
this.arrowDownActiveCss = стрелкаDownActiveCss;
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 = "relative": duma.getStyle(this.obj).backgroundColor == "прозрачный" ? this.obj.style.backgroundColor = "#fff": null; //若容器本来就没有设position，则初始化为относительно；若容器原来未设置背景色,则初始化为白色；
},
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»;
}
еще { 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. стрелкаUpHeight + «px»: ноль;
},
areakeydown:function(e) { //支持键盘上下按键
вар, что = это;
document.onkeydown = функция (событие) {
вар е = событие || окно.событие,
ek = e.keyCode || е. который;
if(ek == 40) { that.area.scrollTop += 25 }
иначе 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();
}
},
handleMove: функция (е) {
вар е = е || окно.событие;
this.area.scrollTop = (e.clientY - this.relY - this.arrowUpHeight)/(this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight)*(this.area.scrollHeight - this.area .offsetHeight);
это.setBarPos();
},
handleMouseDown: функция (е) {
var that = this,e = e || окно.событие;
that.relY = e.clientY - that.handle.offsetTop;
that.handle.setCapture ? that.handle.setCapture(): ноль;
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(): ноль;
document.onmousemove = ноль;
};
},
barScroll:function(e) {
вар е = е || окно.событие, eDir; //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C，根据返回值的正负来判断滚动方向
if(e.wheelDelta) { eDir = e.wheelDelta/120; }
иначе, если (e.detail) { eDir = -e.detail/3; }
еДир > 0? this.area.scrollTop -= 80: this.area.scrollTop += 80; //步长设80像素比较接近window滚动条的滚动速度
if(this.area.scrollTop > 0 && this.area.scrollTop < this.area.scrollHeight - this.area.offsetHeight) { duma.stopEvent(e); }
это.setBarPos();
},
barDown:function(e) {
вар е = е || window.event, that = это,
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.clearBarMouseDownInterval( ); }
that.setBarPos();
},80); }
иначе 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); }
Дума.stopEvent(е);
},
стрелкаUpMouseDown: функция (е) {
вар, что = это;
this.arrowUpInterval = setInterval(function(){ that.area.scrollTop -= 25; that.setBarPos(); },10);
this.arrowUp.className = this.arrowUpActiveCss;
Дума.stopEvent(е);
},
arrowUpMouseUp:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },
arrowUpMouseOut:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; },
стрелкаDownMouseDown: функция (е) {
вар, что = это;
this.arrowDownInterval = setInterval(function(){ that.area.scrollTop += 25; that.setBarPos(); },10);
this.arrowDown.className = this.arrowDownActiveCss;
Дума.stopEvent(е);
},
arrowDownMouseUp:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },
arrowDownMouseOut:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; },
запустить: функция() {
вар, что = это;
это.sethandle();
this.areaScroll();
это.getBarPos();
this.area.onscroll = function(){that.areaScroll()};
this.area.onmouseover = this.bar.onmouseover = функция (событие) {that.areakeydown (событие)};
this.area.onmouseout = this.bar.onmouseout = function () {document.onkeydown = null};
this.handle.onmousedown = функция (событие) {that.handleMouseDown (событие)};
this.bar.onmousedown = функция (событие) {that.barDown (событие)};
this.bar.onmouseup = function(){that.clearBarMouseDownInterval()};
this.bar.onmouseout = function(){that.clearBarMouseDownInterval()};
this.arrowUp.onmousedown = функция (событие) {that.arrowUpMouseDown (событие)};
this.arrowUp.onmouseup = function(){that.arrowUpMouseUp()};
this.arrowUp.onmouseout = function(){that.arrowUpMouseOut()};
this.arrowDown.onmousedown = функция (событие) {that.arrowDownMouseDown (событие)};
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/,
оАрр = [],
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++) {
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();
}
}
Дума.bind(окно,"загрузка",дума.BeautifyScrollBar.init);
</скрипт>
</голова>
<тело>
<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;">
我还是普通的，我不希望被渲染，我就不用你的класс，拿我怎么样？哈哈哈！<br />
我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染, 我就不用你的класс, 拿我怎么样？哈哈哈！<br />我还是普通的,我不希望被渲染,我就不用你的класс,我怎么样？哈哈哈！<br />我还是普通的,我不希望被渲染，我就不用你的класс，拿我怎么样？哈哈哈！<br />我还是普通的,我不希望被渲染,我就不用你的класс，拿我怎么样？哈哈哈！<br />我还是普通的,我不希望被渲染,我就不用你的class,拿我怎么样？哈哈哈！<br />被渲染,我就不用你的класс，拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染, 我就不用你的класс,拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染, 我就不用你的class,拿我怎么样？哈哈哈！<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>
</ол>
<h2>Футбольные изображения, которые можно использовать в качестве защитного покрытия:</h2>
<ул>
<li>Оборудование для установки окон «Оборудование для Windows»</li>
<li>增加页面body的渲染支持</li>
<li>Добавьте текстовое поле в текстовое поле</li>
<li>增加嵌套div的渲染支持（目前代码嵌套时有滚动的bug,被嵌套的div的滚动高度算法到这个版本时将大幅修改）</li>
<li>增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）</li>
</ul>
<p>期待大家帮忙寻找新bug并提出宝贵建议,相信下一版本将做的更好,谢谢（QQ:149561420,gTalk: [email protected] ）。</p>
</тело>
</html>
图片自定义滚动条3.0（Duma“自动渲染版”，也许世间万物都会变,但是真挚的爱, 却永远留存在心中！）
将来版本可继续扩展的功有: