커스텀 스크롤바

웹에서 커스텀 스크롤바를 만드는 경우가 많이 있습니다.

간단한 경우 mCustomscrollbar 를 많이 사용하죠.

하지만 최적화를 위해서라면 직접 만들어 사용해야 했습니다.

(리팩토링을 전혀 하지 않아서, 누군가 해주셨으면 좋겠다는..)

CSS 파일은

html {
height:100%;
}
body{
height:100%;}
.csb .bar-wrap {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 12px;
    background: rgba(255,255,255,0.5);
    z-index: 3;
}
.csb .bar-wrap .bar{
    position: absolute;
    right: 2px;
    top: 0px;
    width: 8px;
    background:#7285c1;
    z-index: 3;
}
.csb .bar-wrap .bar:hover{
    background:#5d71ae;
}
.csb .bar-wrap .bar:active{
    background:#425490;
}

HTML 파일은

<div style="height:100%;overflow-y:auto;padding:50px;position: fixed;" id="test1">
asd
    <div style="width:100%;height:1500px;background:red;">
        <div id="xxxx">asdasdasd</div>
    </div>
    <div style="width:100%;background:blue;">a<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>bzzz<br>bzzz<br>bzzz<br>bzzz<br>bzzz<br>bzzz<br>bzzz<br>bzzz<br>bzzz<br>bzzz<br>bzzz<br>bzzz<br>bzzzuuuuu</div>
</div>
 
 
<div style="max-height:500px;overflow-y:auto;margin-top:5px;" id="test2">
    <div style="width:100%;height:550px;background:green;position: relative;">
        <div style="position: absolute;top:0px;">a</div>
        <div style="position: absolute;bottom:0px;">b</div>
    </div>
</div>

사용법은

var x = UTIL.CustomScrollBar('test2',{
    theme : 'theme1',                // 색깔 테마
    bubble : false,                    // 버블 여부
    speed : 5,                        // 휠 스크롤 스피드
    auto : true,
    barPadding : 5,                // 바의 위 아래 패딩
    move : function(e){            // 이동중 콜백
        console.log('move')
    },
    resize:true
})

var UTIL = {}
 
UTIL.CustomScrollBar = (function () {
 
    var Csb = function (d, option) {
        this.move
        this.barRail
        this.bar
        this.wrap
        this.max
        this.spareRailPx
        this.hasMove
        this.speed
        this.dummy
        this.target = document.getElementById(d)
        if (!this.target) {
            return false;
        }
        this.target.className = this.target.className + ' csb'
        this.isUse = true;
        if (!option) {
            option = {}
        }
        this.option = option;
        option.move && typeof option.move == 'function' ? (this.move = option.move, this.hasMove = true) : 0;
        this.theme = option.theme ? option.theme : 'default'
        this.speed = option.speed ? option.speed : 1
        this.barPadding = option.barPadding ? option.barPadding : 0
        this.barPadding2 = (this.barPadding * 2)
        this.useTransform = option.useTransform
        this.init();
        option.resize ? window.addEventListener('resize', this.listener.auto.bind(this)) : 0
        this.loop.push(this);
    }
 
    // 다같이 공유하는 loop
    Csb.prototype.loop = (function () {
        var list = [];
        var push = function (t) {
            list.push(t)
        }
        var remove = function () {
 
        }
        var loop = (function () {
            var i;
            return function () {
                i = list.length;
                while (i) {
                    i--;
                    if (list[i].wrap.clientHeight != list[i].oldHeight || list[i].target.clientHeight != list[i].tOldHeight) {
                        if (!this.changing) {
                            list[i].changing = true;
                            list[i].listener.auto.apply(list[i])
                        }
                    }
                }
            }
        })()
        var x = setInterval(loop, 60)
        return {
            push: push,
            remove: remove
        }
    })()
 
    Csb.prototype.init = (function () {
        var t, h, l;
        var i;
        var temp;
        return function () {
            i = 0;
            t = this.target;
            h = t.clientHeight
 
            t.style.overflow = 'hidden'
            t.style.overflowY = 'hidden'
            if (!t.style.position) {
                t.style.position = 'relative';
            }
 
            // 이렇게 해야 이벤트가 안 끊김
            temp = t.childNodes;
            this.wrap = document.createElement('div')
            this.wrap.style.position = 'absolute';
            this.wrap.style.left = '0px';
            this.wrap.style.top = '0px';
            this.wrap.style.right = '0px';
            this.wrap.style.zIndex = '2';
            this.useTransform ? this.wrap.style.transform = 'translateY(0px)' : 0
            this.wrap.className = "wrap"
            while (temp.length) {
                this.wrap.appendChild(temp[0])
            }
            t.appendChild(this.wrap)
            this.max = -(this.wrap.clientHeight - h)
 
            this.barRail = document.createElement('div')
            this.barRail.className = 'bar-wrap ' + this.theme
            this.barRail.style.top = this.barPadding + 'px';
            this.barRail.style.bottom = this.barPadding + 'px';
            this.barRail.style.height = h - this.barPadding2 + 'px'
 
            this.bar = document.createElement('div')
            this.bar.className = "bar"
            this.bar.style.top = 0 + 'px'
            this.useTransform ? this.bar.style.transform = 'translateY(0px)' : 0
 
            this.barRail.appendChild(this.bar)
            t.appendChild(this.barRail);
 
            this.barRail.height = this.barRail.clientHeight;
            this.bar.style.height = (h / this.wrap.clientHeight) * (h - (this.barPadding * 2)) + 'px'
            this.spareRailPx = h - this.barPadding2 - this.bar.clientHeight
 
            t.addEventListener('mousewheel', this.listener.wheel.bind(this))
            this.bar.addEventListener('mousedown', this.listener.down.bind(this))
            this.bar.addEventListener('click', function (e) { e.stopPropagation(); })
            this.barRail.addEventListener('click', this.listener.railClick.bind(this))
            this.dummy = document.createElement('div');
            this.dummy.style.height = h + 'px';
            this.dummy.style.position = 'relative';
            this.dummy.style.zIndex = '1';
            t.appendChild(this.dummy)
 
            if (h >= this.wrap.clientHeight) {
                this.isUse = false;
                this.barRail.style.display = 'none'
                this.setWrapPosition(0)
            }
 
            this.oldHeight = this.wrap.clientHeight
            this.tOldHeight = t.clientHeight
            this.changing = false;
        }
    })()
 
    Csb.prototype.getTransY = (function () {
        var reg = /\.*translateY\((-\d+|\d+)/i
        return function (v) {
            return +reg.exec(v)[1];
        }
    })()
 
    Csb.prototype.setWrapPosition = function (v) {
        if (this.useTransform) {
            this.wrap.style.transform = 'translateY(' + v + 'px)'
        } else {
            this.wrap.style.top = v + 'px';
        }
    }
 
    Csb.prototype.getWrapPosition = function (v) {
        if (this.useTransform) {
            return this.getTransY(this.wrap.style.transform)
        } else {
            return parseInt(this.wrap.style.top)
        }
    }
 
    Csb.prototype.setBarPosition = function (v) {
        if (this.useTransform) {
            this.bar.style.transform = 'translateY(' + v + 'px)'
        } else {
            this.bar.style.top = v + 'px';
        }
    }
 
    Csb.prototype.getBarPosition = function (v) {
        if (this.useTransform) {
            return this.getTransY(this.bar.style.transform)
        } else {
            return parseInt(this.bar.style.top)
        }
    }
 
    Csb.prototype.listener = (function () {
        var temp, temp2;
        var _upCallback;
        var _moveCallback;
        var un = function () {
            if (document.selection) {
                document.selection.empty()
            } else {
                window.getSelection().removeAllRanges()
            }
        }
 
        var railClick = (function () {
            var t, t2, t3;
            return function (e) {
                if (!this.isUse) {
                    return;
                }
                e.preventDefault();
                e.stopPropagation();
                t = e.offsetY
                t2 = this.getBarPosition()
                t3 = this.bar.clientHeight
 
                if (t > t2 + t3) {
                    if (this.barRail.height - (t2 + t3) < t3) {
                        this.setBarPosition(this.spareRailPx)
                        this.setWrapPosition(this.max)
                    } else {
                        this.setBarPosition(t2 + t3)
                        this.setWrapPosition(this.max * ((t2 + t3) / this.spareRailPx))
                    }
                } else {
                    if (t2 < t3) {
                        this.setBarPosition(0)
                        this.setWrapPosition(0)
                    } else {
                        this.setBarPosition(t2 - t3)
                        this.setWrapPosition(this.max * ((t2 - t3) / this.spareRailPx))
                    }
                }
            }
        })()
 
        var wheel = (function () {
            var t;
            return function (e) {
                if (!this.isUse) {
                    return;
                }
                t = this.getWrapPosition() + e.wheelDelta / (15 * 1 / this.speed)
                if (t > 0) {
                    this.setWrapPosition(0)
                    this.setBarPosition(0)
                    if (this.option.bubble == false) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                }
                else if (this.max > t) {
                    this.setWrapPosition(this.max)
                    this.setBarPosition(this.spareRailPx)
                    if (this.option.bubble == false) {
                        e.preventDefault();
                        e.stopPropagation();
                    }
                } else {
                    this.setWrapPosition(t)
                    this.setBarPosition((t / this.max * 100 * (this.spareRailPx / 100)))
                    e.preventDefault();
                    e.stopPropagation();
                }
                this.hasMove ? this.move(e) : 0
            }
        })()
 
        var down = function (e) {
            if (!this.isUse) {
                return;
            }
            e.preventDefault();
            e.stopPropagation();
            document.removeEventListener('mousemove', _moveCallback);
            document.removeEventListener('mouseup', _upCallback)
            _upCallback = up.bind(this)
            _moveCallback = mousemove.bind(this)
            temp = e.clientY;
            temp2 = this.getBarPosition();
            document.addEventListener('mousemove', _moveCallback);
            document.addEventListener('mouseup', _upCallback);
        }
 
        var up = function () {
            document.removeEventListener('mousemove', _moveCallback);
            document.removeEventListener('mouseup', _upCallback)
        }
 
        var mousemove = function (e) {
            e.preventDefault();
            e.stopPropagation();
            un();
            var t = e.clientY - temp + temp2;
            if (t < 0 || t > this.spareRailPx) {
                return
            }
            this.hasMove ? this.move(e) : 0
            this.setBarPosition(t)
            this.setWrapPosition(t / this.spareRailPx * this.max)
        }
        var auto = (function () {
            var t, h
            return function () {
                this.barRail.style.display = 'none'
                t = this.target;
                h = t.clientHeight
                this.max = -(this.wrap.clientHeight - t.clientHeight)
                this.barRail.style.height = h - this.barPadding2 + 'px'
                if (this.getWrapPosition() < this.max) {
                    this.setWrapPosition(this.max)
                }
                if (t.clientHeight >= this.wrap.clientHeight) {
                    this.isUse = false;
                    this.barRail.style.display = 'none'
                    this.setWrapPosition(0)
                } else {
                    this.isUse = true;
                    this.barRail.style.display = 'block'
                    this.dummy.style.height = h + 'px'
                }
                this.barRail.height = this.barRail.clientHeight;
                this.setBarPosition(this.getWrapPosition() / this.max * this.spareRailPx)
                this.bar.style.height = (h / this.wrap.clientHeight) * this.barRail.height + 'px'
                this.spareRailPx = this.barRail.height - this.bar.clientHeight
                this.oldHeight = this.wrap.clientHeight
                this.tOldHeight = t.clientHeight
                this.changing = false;
            }
        })()
 
        return {
            down: down,
            up: up,
            mousemove: mousemove,
            wheel: wheel,
            railClick: railClick,
            auto: auto
        }
    })()
    return function (d, option) {
        return new Csb(d, option);
    }
})();