原生js模拟滚动条插件

最近在做一个模仿微信在线聊天的demo，页面需要用到滚动条，可是不喜欢原生的，干脆就用面向对象的方式自己写了一个，可以随意换css，一劳永逸了~
1.滚动条相关css
scroll.css

.scroll-content {
    width: 100%;
}

.scroll-box {
    position: absolute;
    width: 7px;
    background-color: antiquewhite;
}

.scroll-tool {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 5px;
}

2.js代码：
scroll.js

(function () {
    class AutoScroll {
        constructor(obj) {
            this.obj = obj;
            //滚动条的css文件路径
            this.linkUrl = 'module/scroll/scroll.css';
            //滚动内容
            this.scrollContent = null;
            //滚动条元素
            this.scrollBox = null;
            //滚动元素
            this.scrollTool = null;
            //记录滚动条的高度
            this.num = 0;
            //滚动速度
            this.speed = 10;
            //初始化
            this.init();
        }

        init() {
            //如果存在同id的css标签则删除
            let scrollStyle = document.querySelector('#scrollStyle');
            if (scrollStyle) {
                document.querySelector('head').removeChild(scrollStyle);
            }

            //在head标签中引入css样式
            let link = document.createElement('link');
            link.href = this.linkUrl;
            link.rel = "stylesheet";
            link.setAttribute('id', '#scrollStyle');
            let head = document.querySelector('head');
            head.appendChild(link);

            //创建滚动结构条件
            let h1 = this.obj.clientHeight;
            let h2 = this.obj.scrollHeight;

            //如果内容不足以溢出可视区域 就不需要滚动条
            if (h1 >= h2) return;

            //否则创建滚动条
            this.createScroll(h1, h2);
            this.scrollContent = this.obj.querySelector('.scroll-content');
            this.scrollBox = this.obj.querySelector('.scroll-box');
            this.scrollTool = this.obj.querySelector('.scroll-tool');

            this.scrollTool.onmousedown = (event) => {
                event.preventDefault();
                let x1 = event.clientX;
                let y1 = event.clientY;
                this.drag.call(this, x1, y1);
            };
            this.wheel();
        }

        createScroll(h1, h2) {
            //内容溢出，创建滚动结构
            let scrollContent = document.createElement('div');
            scrollContent.classList.add('scroll-content');
            document.body.appendChild(scrollContent);

            //注意：会丢失元素节点的事件和私有属性
            scrollContent.innerHTML = this.obj.innerHTML;
            this.obj.innerHTML = "";
            this.obj.appendChild(scrollContent);
            this.obj.position = "relative";

            //创造滚动条scrollBox，滚动元素tool
            let scrollBox = document.createElement('div');
            scrollBox.classList.add('scroll-box');
            scrollBox.style.height = h1 + "px";
            scrollBox.style.top = this.offsetVal(this.obj).offsetT + "px";
            scrollBox.innerHTML = `<div class='scroll-tool' style='height: ${h1 / h2 * h1}px' </div>`;
            this.obj.appendChild(scrollBox);
            scrollBox.style.left = this.offsetVal(this.obj).offsetL + (this.obj.offsetWidth - 7) + "px";
        }

        drag(x1, y1) {
            document.onmousemove = (event) => {
                let x2 = event.clientX;
                let y2 = event.clientY;
                let x = Math.abs(x2 - x1);
                let y = y2 - y1;
                let topValue = this.num + y;

                //边界处理
                if (topValue <= 0) {
                    topValue = 0;
                }

                if (topValue >= this.obj.offsetHeight - this.scrollTool.offsetHeight) {
                    topValue = this.obj.offsetHeight - this.scrollTool.offsetHeight;
                }

                this.scrollTool.style.top = topValue + "px";
                this.scrollContent.style.marginTop = -((topValue / this.obj.offsetHeight) * this.scrollContent.offsetHeight) + "px";

                if (x > 100) {
                    this.num = this.offsetVal(this.scrollTool).offsetT;//记录变化后的位置
                    document.onmousemove = null;
                }
            }

            document.onmouseup = (event) => {
                document.onmousemove = null;
                this.num = this.offsetVal(this.scrollTool).offsetT;//记录变化后的位置
            }
        }

        wheel() {
            //chrome--event.wheelDelta, >0为鼠标滚轮向上滚动，<0为向下滚动
            this.obj.onmousewheel = (event) => {
                let oEvent = event || window.event;
                oEvent.wheelDelta > 0 ? this.up() : this.down();
            }

            //firefox--event.detail,>0为鼠标向下滚动，<0为向上滚动
            this.obj.addEventListener("DOMMouseScroll", (event) => {
                let oEvent = event || window.event;
                oEvent.detail> 0 ? this.down() : this.up();
            })
        }

        up() {
            this.num -= this.speed;
            if (this.num <= 0) {
                this.num = 0;
            }
            this.scrollTool.style.top = this.num + "px";
            this.scrollContent.style.marginTop = -((this.num / this.scrollBox.clientHeight) * this.scrollContent.offsetHeight) + "px";
        }

        down() {
            this.num += this.speed;
            if (this.num >= this.scrollBox.clientHeight - this.scrollTool.offsetHeight) {
                this.num = this.scrollBox.clientHeight - this.scrollTool.offsetHeight;
            }
            this.scrollTool.style.top = this.num + "px";
            this.scrollContent.style.marginTop = -((this.num / this.scrollBox.clientHeight) * this.scrollContent.offsetHeight) + "px";
        }

        offsetVal(obj) {
            let offsetLeftVal = obj.offsetLeft;
            let offsetTopVal = obj.offsetTop;

            if (obj.offsetParent) {
                offsetLeftVal = offsetLeftVal + this.offsetVal(obj.offsetParent).offsetL;
                offsetTopVal = offsetTopVal + this.offsetVal(obj.offsetParent).offsetT;
            }
            return {
                offsetL: offsetLeftVal,
                offsetT: offsetTopVal
            };
        }
    }

    window.AutoScroll = AutoScroll;
})();

使用示例：

// 想要自定义滚动条的容器
const scrollDemo = document.querySelector('.scroll-demo');
new AutoScroll(scrollDemo);

在线展示

效果图如下：

2018-01-02_152653.jpg