自定义滚动条样式

以下是自己写的一个自定义滚动条，暂时只支持改变y轴滚动条

<div class="scroll-content" id = "scroll1">        <div class="scroll-block">             <p>hahahahha</p> <!--这里面是内容  -->            <p>lkallalalla</p>            <p>hohohoohoo</p>            <p>mamammamamam</p>            <p>alallalalalal</p>            <p>hahahahha</p>            <p>lkallalalla</p>            <p>hohohoohoohohoh啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>            <p>mamammamamam</p>            <p>alallalalalal</p>        </div>    </div>

用法：

scrollModel.init({    node: document.getElementById("scroll1"),  //引用滚动条节点    contentH: 200,   //内容高度    barW: 5,          //滚动条宽度    barBg: '#fff4b4',    //滚动条背景色    barTopH: 10,      //滚动条上下点击的高度    barSlideBg: '#5cc74f',  //滚动条滑块背景色    barTopBg: '#50d7ff'    //滚动条上下点击区域背景色})

js文件代码

var scrollModel = (function ($) {    var dataObj;    var pressFlag = false;    var startPos;    var slideT;    function init(obj) {        dataObj = {            node: obj.node,            contentW: obj.contentW? obj.contentW: '',            contentH: obj.contentH ? obj.contentH: '',            barW: obj.barW ? obj.barW : 0,            barBg: obj.barBg ? obj.barBg : '#F1F1F1',            barTopH: obj.barTopH ? obj.barTopH : 0,            barSlideBg: obj.barSlideBg ? obj.barSlideBg: "#b1b1b1",            barTopBg: obj.barTopBg? obj.barTopBg : "#d2d2d2"        };        slideT = 0;        dataObj.scrollHeight = $(dataObj.node).find(".scroll-block").height();        dataObj.barSlideHeight = (dataObj.contentH-2*dataObj.barTopH)*dataObj.contentH/dataObj.scrollHeight;        rederBar();        events();    }    //渲染滚动条    function rederBar() {          $(dataObj.node).css({"width": dataObj.contentW, "height": dataObj.contentH});        $(dataObj.node).find(".scroll-block").css({"width": $(dataObj.node).width()+17-dataObj.barW, "height": dataObj.contentH});        var barHtml = '<div class="scroll-bar" style = "width: '+dataObj.barW+'px; background-color: '+dataObj.barBg+'">';                barHtml +=  '<div class="s-bar-top" style = "width: '+dataObj.barW+'px; height: '+dataObj.barTopH+'px; background-color: '+dataObj.barTopBg+'"></div>';                barHtml +=  '<div class="s-bar-middle" style = "height: '+(dataObj.contentH-2*dataObj.barTopH)+'px; margin-top: '+ dataObj.barTopH+'px">';                    barHtml +=  '<div class="s-bar-slider" style = "width: '+dataObj.barW+'px; height: '+dataObj.barSlideHeight+'px; top: 0px; background-color: '+dataObj.barSlideBg+'"></div>';                barHtml +=  '</div>';                barHtml +=  '<div class="s-bar-bottom" style = "width: '+dataObj.barW+'px; height: '+dataObj.barTopH+'px; background-color: '+dataObj.barTopBg+'"></div>';            barHtml +=  '</div>';            $(dataObj.node).append(barHtml);    }    function events() {        //滚轮事件        $(dataObj.node).find(".scroll-block").scroll(function(e) {            if (!pressFlag) {                slideT = (dataObj.contentH-2*dataObj.barTopH)*e.target.scrollTop/dataObj.scrollHeight;                $(dataObj.node).find(".s-bar-slider").css({"top": slideT});            }        });        $(dataObj.node).find(".s-bar-slider").mousedown(function(e) {            pressFlag = true;            startPos = e.clientY;            moveSlide();            return false;        })        //取消点击滑块事件        $(dataObj.node).find(".s-bar-slider").click(function() {            return false;        })        $(dataObj.node).mouseup(function() {            pressFlag = false;            $(dataObj.node).off("mousemove");            return false;        })        //点击滚动条定位        $(dataObj.node).find(".s-bar-middle").click(function(e) {            var clickHeight = e.clientY - $(this).offset().top;            if (clickHeight<dataObj.barSlideHeight/2) {                slideT = 0;            }            else if(clickHeight> dataObj.contentH-2*dataObj.barTopH-dataObj.barSlideHeight/2) {                slideT = dataObj.contentH-2*dataObj.barTopH-dataObj.barSlideHeight/2;            }            else {                slideT = clickHeight - dataObj.barSlideHeight/2;            }            slideTo();            return false;        })          var timer;        $(dataObj.node).find(".s-bar-top").click(function() {            slideTop();        })        $(dataObj.node).find(".s-bar-top").mousedown(function() {            timer = setInterval(function() {                slideTop();            },100)        })        $(dataObj.node).find(".s-bar-top").mouseout(function() {            clearInterval(timer);        })        $(dataObj.node).find(".s-bar-top").mouseup(function() {            clearInterval(timer);        })        $(dataObj.node).find(".s-bar-bottom").click(function() {            slideBottom();        })        $(dataObj.node).find(".s-bar-bottom").mousedown(function() {            timer = setInterval(function() {                slideBottom();            },100)        })        $(dataObj.node).find(".s-bar-bottom").mouseout(function() {            clearInterval(timer);        })        $(dataObj.node).find(".s-bar-bottom").mouseup(function() {            clearInterval(timer);        })    }    //滑块向上移动    function slideTop() {        if (slideT > 3) {            slideT -= 3;        }        else {            slideT = 0;        }        slideTo();    }    //滑块向下移动    function slideBottom() {        if (slideT <= dataObj.contentH-2*dataObj.barTopH-dataObj.barSlideHeight-3) {            slideT += 3;        }        else {            slideT = dataObj.contentH-2*dataObj.barTopH-dataObj.barSlideHeight;        }        slideTo();    }    //移动滑块事件    function moveSlide() {        $(dataObj.node).find(".s-bar-slider").mousemove(function(e) {            if (pressFlag) {                var st = slideT + e.clientY-startPos;                if ((st >= 0) &&(st <= dataObj.contentH-2*dataObj.barTopH-dataObj.barSlideHeight) ) {                    slideT += e.clientY-startPos;                    slideTo();                    startPos = e.clientY;                }            }        })    }    //滚动条和内容移动    function slideTo() {        $(dataObj.node).find(".s-bar-slider").css({"top": slideT});        $(dataObj.node).find(".scroll-block").scrollTop(dataObj.scrollHeight*(slideT)/(dataObj.contentH-2*dataObj.barTopH));    }    return {init: init};})(jQuery);

效果图如下：

项目地址：
https://github.com/yawenzou/scroll