知识点

• $.extend 方法
• jQuery 事件命名空间
• 事件对象属性 : pageX 、 pageY
• 获得原生事件 : e.originalEvent
• 位置方法 : scrollTop、scrollLeft、scrollHeight、scrollWidth 、position
• 滚轮事件的处理 ：oEv.wheelDelta 、oEv.deltail

源码地址

演示地址

js

(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,     // 滚轮步长 ，默认为10 
                tabItemSelector:"",     // 标签类名
                tabActiveClass :"",     // 选中类名
                anchorSelector :"",     // 锚点选择器
                correctSelector:"",     // 校正元素
                articalSelector:"",     // 文章选择器
                isAnimate      :false,  // 是否开启动画 ，默认无动画
                speed          :800,    // 动画时长
            }
            $.extend(true,self.options,options || {});
            self._initDomEvent();
            return self;
        },
        // 初始化dom元素
        _initDomEvent:function(){
   
            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.$tabItem=$(opts.tabItemSelector);
            // 锚点项
            this.$anchor=$(opts.anchorSelector);
            // 文章
            this.$article=$(opts.articalSelector);
            // 校正元素对象
            this.$correct=$(opts.correctSelector);
            // 启动函数
            this._initSliderDragEvent()
                ._bindContScroll()
                ._bindMouseWheel()
                ._initTabEvent()
                .initArticleHeight();
        },
        // 初始化滑块拖动功能
        _initSliderDragEvent:function(self){
   
            var slider=this.$slider,
                sliderEl=slider[0],
                self=this;
            if(sliderEl){
                var doc=this.$doc,
                    dragStratPagePosition,
                    dragStartScrollPosition,
                    dragContBarRate;
                function mousemoveHandler (e){
   
                    e.preventDefault;
                    console.log("mousemove");
                    if(dragStratPagePositio