滚动条效果实现

(function(win, doc, $) {
    function CusScrollBar(options) {
        this._init(options);
    }
    $.extend(CusScrollBar.prototype, {
        _init: function(options) {
            var self = this;
            self.options = {
                    scrollDir: "y", //滚动方向
                    contSelector: "", //滚动内容选择器
                    barSelector: "", //滚动条选择器
                    sliderSelector: "", //滚动滑块选择器
                    wheelStep: "10", //滚轮步长
                },
                $.extend(true, self.options, options || {});
            self._initDomEvent();
            return self;
        },
        _initDomEvent: function() {
        	var self = this;
            var opts = this.options;
            this.$cont = $(opts.contSelector);
            this.$slider = $(opts.sliderSelector);
            this.$bar = opts.barSelector ? $(opts.barSelector) : self.$slider.parent();
            this.$doc = $(doc);
            this._initSliderDragEvent()._bindContScroll()._bindMousewheel();
        },
        _initSliderDragEvent: function() {
            var slider = this.$slider;
            var self = this;
            sliderEl = slider[0];
            if (sliderEl) {
                var doc = this.$doc,
                    dragStartPagePosition,
                    dragStartScrollPosition,
                    dragContBarRate;

                function mousemoveHnader(e) {
                    e.preventDefault();
                    if (dragStartPagePosition == null) {
                        return;
                    };
                    self.scrollTo(dragStartScrollPosition + (e.pageY - dragStartPagePosition) * dragContBarRate);
                };
                slider.on("mousedown.scroll", function(e) {
                    e.preventDefault();
                    dragStartPagePosition = e.pageY;
                    dragStartScrollPosition = self.$cont.scrollTop();
                    dragContBarRate = self.getMaxScrollPosition() / self.getMaxSliderPositon();
                    doc.on("mousemove.scroll", mousemoveHnader).on("mouseup", function() {
                        doc.off(".scroll");
                    });
                });
            };
            return self;
        },
        _bindContScroll: function() {
            var self = this;
            self.$cont.on("scroll", function() {
                var sliderEl = self.$slider && self.$slider[0];
                if (sliderEl) {
                    sliderEl.style.top = self.getSliderPosition() + "px";
                };
            });
            return self;
        },
        _bindMousewheel:function(){
            var self = this;
            self.$cont.on("mousewheel DOMMouseScroll",function(e){
                e.preventDefault();
                var oEv = e.originalEvent,
                    wheelRange = oEv.wheelDelta ? -oEv.wheelDelta/120 : (oEv.detail || 0)/3;
                self.scrollTo(self.$cont[0].scrollTop + wheelRange*self.options.wheelStep)
            })
            return self;
        },
        getSliderPosition() {
            var self = this,
                maxSliderPosition = self.getMaxSliderPositon();
                console.log()
            return Math.min(maxSliderPosition, maxSliderPosition * self.$cont.scrollTop() / self.getMaxScrollPosition());
        },
        getMaxScrollPosition: function() {
            var self = this;
            return Math.max(self.$cont.height(), self.$cont[0].scrollHeight) - self.$cont.height();
        },
        getMaxSliderPositon: function() {
            var self = this;
            return self.$bar.height() - self.$slider.height();
        },
        scrollTo: function(positionVal) {
            var self = this;
            self.$cont.scrollTop(positionVal)
        }
    })
    win.CusScrollBar = CusScrollBar;
})(window, document, jQuery)