• 自定义滚动条


    一般来说,我们都很清楚ie专属的几个属性可以自定义滚动条的

     SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色
    SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色
    SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色
    SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色
    SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色
    SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色
    SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色
    SCROLLBAR-BASE-COLOR: 滚动条的基本颜色

    这样看的清楚点,呵呵。

    但是这并不能解决根本问题,如何来定义一个兼容的滚动条,故而采用了一个div自定义滚动条,我已经用到自己的项目中去了,但是还是把让我受益的源代码贴出来,当然其中也是有所删减的,贴出来的都是可以直接用的,当然也方便自己以后使用。

    <!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=utf-8" />
    <title></title>
    <style type="text/css">
    * { margin:0; padding:0; }
    body { margin:20px 0 400px 20px; font:12px Arial; }
    .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.webjx.com/files/090716/1_161603.gif);
    }
    .dumascroll_bar {
    position:absolute;
    top:0;
    right:0;
    z-index:9;
    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 {
    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 { 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 type="text/javascript">
    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 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 + "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 = /dumascroll/,
    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 class="a dumascroll b" style="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>
    </body>
    </html>
    View Code
  • 相关阅读:
    k8s 权限控制初探
    golang gRPC 入门
    gpushare-scheduler-extender 升级依赖引发关于 golang dep 工具的思考
    admission webhook 初探(编译篇)
    以 gpushare-device-plugin 为例,探究 Resource yaml 配置
    编译 gpushare-device-plugin
    浅谈 docker 挂载 GPU 原理
    CCF计算机职业资格认证考试题解
    优达学城机器学习工程师纳米学位项目介绍
    IEEEXtreme 极限编程大赛题解
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/3467098.html
Copyright © 2020-2023  润新知