运行代码框
<!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; -
ร่างกาย { ระยะขอบ: 20px 0 400px 20px; ตัวอักษร:12px Arial; -
h1 { ขนาดตัวอักษร: 14px; -
เol, ul { ระยะขอบ: 20px; เส้นสูง:160%; -
อุลลี่ { color:#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-ผู้ใช้เลือก: ไม่มี;
-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; -
</สไตล์>
<สคริปต์>
วาร์ดูมา = {
$:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} },
getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); -
getOffset: ฟังก์ชั่น (o) {
var t = o.offsetTop,h = o.offsetHeight;
ในขณะที่ (o = o.offsetParent) { t += o.offsetTop; -
กลับ { ด้านบน: t ความสูง: h };
-
ผูก: ฟังก์ชั่น (o, eType, fn) {
ถ้า (o.addEventListener) { o.addEventListener (eType, fn, false); -
อื่น ๆ ถ้า (o.attachEvent) { o.attachEvent ("บน" + eType,fn); -
อื่น { o["บน" + eType] = fn; -
-
stopEvent: ฟังก์ชั่น (e) {
อี = อี || หน้าต่าง.เหตุการณ์;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = จริง, e.returnValue = เท็จ);
-
setCookie: ฟังก์ชั่น (c_name, ค่า, วันหมดอายุ) {
var exdate = วันที่ใหม่ ();
exdate.setDate(exdate.getDate() + วันหมดอายุ);
document.cookie = c_name + "=" + Escape(value) + ((หมดอายุ == 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.length + 1;
c_end = document.cookie.indexOf(";",c_start);
ถ้า (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) {
นี้.arrowUpInterval;
นี้.arrowDownInterval;
this.barMouseDownInterval;
นี้.relY;
this.id = obj;
this.obj = ดูมา.$(this.id);
นี้.setObjCss(); //预先设置父容器的css定位才能让接下来的属性设置起作用
this.obj.innerHTML = '<div id="' + obj + 'Area" class="dumascroll_area">' + this.obj.innerHTML + '</div><div id="' + obj + 'บาร์" class="dumasscroll_bar"><div class="dumasscroll_arrow_up"></div><div class="dumasscroll_handle"></div><div class="dumasscroll_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 = 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));
-
ดูมา.BeautifyScrollBar.prototype = {
setObjCss:ฟังก์ชั่น() {
duma.getStyle(this.obj).position == "คงที่" ? this.obj.style.position = "relative" : duma.getStyle(this.obj).BackgroundColor == "transparent" ? this.obj.style.BackgroundColor = "#fff" : null; //若容器本来就没有设position，则初始化为relative;若容器原来未设置背景色，则初始化为白色;
-
sethandle:function() { // 当内容超多时设置拖拽条子的最容高度
this.handle.style.top = this.arrowUpHeight + "px";
ถ้า (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 + "ชื่อคุกกี้",this.barPos,1);
-
getBarPos:ฟังก์ชั่น() {
this.barPos = duma.getCookie(this.id + "ชื่อคุกกี้");
ถ้า(this.barPos!=null && this.barPos!="") {
this.area.scrollTop = this.barPos;
นี้.areaScroll();
-
-
clearArrowUpInterval:function() { clearInterval(this.arrowUpInterval); -
clearArrowDownInterval:function() { clearInterval(this.arrowDownInterval); -
clearBarMouseDownInterval:function() { clearInterval(this.barMouseDownInterval); -
areaScroll: ฟังก์ชั่น () {
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) + นี่ arrowUpHeight + "px" : null;
-
areakeydown: ฟังก์ชั่น (e) { // 支持键盘上下按键
var นั่น = นี่;
document.onkeydown = ฟังก์ชั่น (เหตุการณ์) {
var e = เหตุการณ์ || หน้าต่าง.เหตุการณ์,
ek = e.keyCode || e.ซึ่ง;
ถ้า (ek == 40) { that.area.scrollTop += 25 }
อื่นถ้า (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);
this.setBarPos();
-
handleMouseDown: ฟังก์ชั่น (e) {
var นั่น = นี่, e = e || หน้าต่าง.เหตุการณ์;
that.relY = e.clientY - that.handle.offsetTop;
that.handle.setCapture ? that.handle.setCapture() : null;
that.handle.className = that.handleActiveCss;
document.onmousemove = ฟังก์ชั่น (เหตุการณ์) { that.handleMove (เหตุการณ์); -
document.onmouseup = ฟังก์ชั่น () {
that.handle.className = that.handleCss;
that.handle.releaseCapture ? that.handle.releaseCapture() : null;
เอกสาร onmousemove = null;
-
-
บาร์เลื่อน: ฟังก์ชั่น (e) {
วาร์ อี = อี || window.event,eDir; //设置滚轮事件,e.wheelDelta与e.detail分别兼容IE、W3C，根据返回值的正负来判断滚动方向
ถ้า (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); -
this.setBarPos();
-
บาร์ลง: ฟังก์ชั่น (e) {
วาร์ อี = อี || window.event นั่น = นี่
eY = e.clientY,
mStep = this.bar.offsetHeight,
documentScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
hOffset = duma.getOffset(this.handle)
bOffset = duma.getOffset(this.bar);
ถ้า (documentScrollTop + eY < hOffset.top) { this.barMouseDownInterval = setInterval (ฟังก์ชัน (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); -
อย่างอื่นถ้า (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(e);
-
arrowUpMouseDown:ฟังก์ชั่น(e) {
var นั่น = นี่;
this.arrowUpInterval = setInterval(function(){ that.area.scrollTop -= 25; that.setBarPos(); },10);
this.arrowUp.className = this.arrowUpActiveCss;
ดูมา.stopEvent(e);
-
arrowUpMouseUp:ฟังก์ชั่น() { 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;
ดูมา.stopEvent(e);
-
arrowDownMouseUp:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; -
arrowDownMouseOut:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; -
วิ่ง: ฟังก์ชั่น () {
var นั่น = นี่;
นี้.sethandle();
นี้.areaScroll();
this.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,"ล้อเมาส์",ฟังก์ชั่น(เหตุการณ์){that.barScroll(เหตุการณ์)});
duma.bind(this.obj,"DOMMouseScroll",ฟังก์ชั่น(เหตุการณ์){that.barScroll(เหตุการณ์)});
-
-
ดูมา.BeautifyScrollBar.init = ฟังก์ชั่น() {
var o = document.getElementsByTagName("div"),
oLen = o.ความยาว
dumascrollClass = /bdumascrollb/,
โออาร์ = [],
oArrLen = oArr.ความยาว;
สำหรับ (var i=0; i<oLen; i++) {
ถ้า(dumascrollClass.test(o[i].className)) {
oArr.push("dumaScrollAreaId_" + i);
oArrLen = oArr.ความยาว;
o[i].id = oArr[oArrLen - 1];
-
-
สำหรับ (var j = 0; j <oArrLen; j ++) {
ใหม่ duma.BeautifyScrollBar(oArr[j],"dumascroll_arrow_up", "dumasscroll_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: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 />我还是普通的，我不希望被渲染，我就不用ชั้นเรียนของคุณ怎么样？哈哈哈!<br />我还是普通的，我不希望被渲染，我就不用的class，拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈!<br />我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br />被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br />我还是普通的，我不希望被渲染，我就不ชั้นเรียนของคุณ拿我怎么样？哈哈哈!<br />我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈!<br />
</div>
<div class="a dumascroll" style="width:780px; height:350px; margin:20px; border:1px solid #369; พื้นหลัง:#eee url( http://bbs.blueidea.com/thread-2936181- 1-3.html " target="">以往版本</a></li>
</ol>
<h2>将来版本可继续扩ส่วนขยายของ功能有：</h2>
<ul>
<li>增加空格键的“下方向”快速滚动支持（更好地模拟windows滚动条用户体验）</li>
<li>增加页เลดี้ร่างกาย的渲染支持</li>
<li>增加textarea的渲染支持</li>
<li>增加嵌套的div的渲染支持（目前代码嵌套时有滚动的bug，被嵌套的div的滚动高度算法到这个版本时将大幅修改）</li> ลี้>
<li>增加同时出现横向滚动条的支持（当有这方的需求时可以扩）ส่วนขยาย</li>
</ul>
<p>期待大家帮忙寻找新bug并提出宝贵建议，相信下一版本将做的更好，谢谢（QQ：149561420，gTalk： [email protected] ）。</p>
</ร่างกาย>
</html>
也许世间万物都会变，但是真挚的爱，却永远留存在หัวใจ中！）
将来版本可继续扩ส่วนขยายของ功能有：