自定义滚动条3.0

时间:2020-05-12 人气:0

支持任意形式（包括图片自定义）的美化扩展，跨浏览器支持
支持鼠标按住上、下箭按钮实现上下滚动
支持鼠标滚轮放于“滚动条区”滚动，而不仅限放于滚动内容区才滚
支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动
滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子
支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）
支持键盘上下方向键，滚动区滚完之后才轮到页面body滚
支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie）
鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚
在原来几个版本基础上代码重构，这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染，而不设此class的不受影响
修复了以往版本所发现的bug：以往版本

将来版本可继续扩展的功能有：
1、增加空格键的“下方向”快速滚动支持（更好地模拟windows滚动条用户体验）
2、增加页面body的渲染支持
3、增加textarea的渲染支持
4、增加嵌套div的渲染支持（目前代码嵌套时有滚动的bug，被嵌套的div的滚动高度算法到这个版本时将大幅修改）
5、增加同时出现横向滚动条的支持（当有这方面需求时可以扩展）

演示：

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title></title> 
<style type="text/css"> 
* { margin:0; padding:0; } 
body { margin:20px 0 400px 20px; font:12px Arial; } 
h1 { font-size:14px; } 
ol,ul { margin:20px; line-height:160%; } 
ul li { color:#f00; } 
.a1 { width:300px; height:190px; border:1px solid #f00; overflow:auto; } 
.a2 { width:600px; height:350px; margin:100px 0 100px 80px; border:1px solid #369; background:#eee url(http://www.blueidea.com/articleimg/2009/07/6875https://img.qb5200.com/download-x/duma.gif) no-repeat 50%; overflow:auto; } 
.dumascroll {}        /*只需对需要渲染滚动条的div设置该class即可*/ 
.dumascroll_area { 
    height:100%; 
    overflow:hidden; 
} 
.dumascroll_bar,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { 
    background-image:url(http://www.blueidea.com/articleimg/2009/07/6875/un_bg_bar.gif); 
} 
.dumascroll_bar { 
    position:absolute; 
    top:0; 
    right:0; 
    z-index:9; 
    width:14px; 
    height:100%; 
    cursor:default; 
    -moz-user-select:none; 
    -khtml-user-select:none; 
    user-select:none; 
    background-repeat:repeat-y; 
    background-position:-42px 0; 
    float:left; 
} 
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { 
    position:absolute; 
    left:0; 
} 
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { 
    width:100%; 
    height:14px; 
    color:#fff; 
    text-align:center; 
} 
.dumascroll_arrow_up,.dumascroll_arrow_up_a { top:0; } 
.dumascroll_arrow_down,.dumascroll_arrow_down_a { bottom:0; } 
.dumascroll_handle,.dumascroll_handle_a { width:100%; background-repeat:repeat-y; } 
.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; } 
</style> 
<script> 
var duma = { 
    $:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} }, 
    getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); }, 
    getOffset:function(o) { 
        var t = o.offsetTop,h = o.offsetHeight; 
        while(o = o.offsetParent) { t += o.offsetTop; } 
        return { top:t, height:h }; 
    }, 
    bind:function(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:function(e) { 
        e = e || window.event; 
        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() + expiredays); 
        document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()); 
    }, 
    getCookie:function(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; } 
                return unescape(document.cookie.substring(c_start,c_end)); 
            } 
        } 
        return ""; 
    } 
}; 
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定位才能让接下来的属性设置起作用 
    this.obj.innerHTML = '<div>' + this.obj.innerHTML + '</div><div><div></div><div></div><div></div></div>'; 
    this.area = duma.$(obj + "Area"); 
    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:function() { 
        duma.getStyle(this.obj).position == "static" ? 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"; 
        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:function() { 
        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); }, 
    areaScroll:function() { 
        this.handle.style.display != "none" ? 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 that = this; 
        document.onkeydown = function(event) { 
            var e = event || window.event, 
            ek = e.keyCode || e.which; 
            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(); 
        } 
    }, 
    handleMove:function(e) { 
        var e = e || window.event; 
        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:function(e) { 
        var that = this,e = e || window.event; 
        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:function(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;    //步长设80像素比较接近window滚动条的滚动速度 
        if(this.area.scrollTop > 0 && this.area.scrollTop < this.area.scrollHeight - this.area.offsetHeight){ duma.stopEvent(e); } 
        this.setBarPos(); 
    }, 
    barDown:function(e) { 
        var e = e || window.event,that = this, 
            eY = e.clientY, 
            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:function(e) { 
        var that = this; 
        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:function(e) { 
        var that = this; 
        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; }, 
    run:function(){ 
        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,"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.length, 
        dumascrollClass = /\bdumascroll\b/, 
        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++) { 
        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> 
<body> 
<div> 
我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br>我是第一个被渲染的，真不幸<br> 
</div> 
<div> 
我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br> 
我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br>被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br>我还是普通的，我不希望被渲染，我就不用你的class，拿我怎么样？哈哈哈！<br> 
</div> 
<div> 
22222<br><div> 
真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 真倒霉啊，俺还是被嵌套渲染的，555555<br> 
</div> 
<div> 
笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧<br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧<br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧<br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧<br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧<br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧<br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧<br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧<br>笨哟你，嵌套就嵌套，你不用他class就不会被渲染，你看看我，羡慕吧<br> 
</div><br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111<br>fsdfs<br>11111111 
</div> 
<h1>图片自定义滚动条3.0（Duma"自动渲染版"，也许世间万物都会变，但是真挚的爱，却永远留存在心中！）</h1> 
<ol> 
<li>支持任意形式（包括图片自定义）的美化扩展，跨浏览器支持</li> 
<li>支持鼠标按住上、下箭按钮实现上下滚动</li> 
<li>支持鼠标滚轮放于"滚动条区"滚动，而不仅限放于滚动内容区才滚</li> 
<li>支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动</li> 
<li>滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子</li> 
<li>支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）</li> 
<li>支持键盘上下方向键，滚动区滚完之后才轮到页面body滚</li> 
<li>支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie）</li> 
<li>鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚</li> 
<li>在原来几个版本基础上代码重构，这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染，而不设此class的不受影响</li> 
<li>修复了以往版本所发现的bug：<a href="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：dumachuixuf@gmail.com）。</p> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容