课程列表：

自定义滚动条课程001-html和样式的编写

为什么需要自定义滚动条课程002

上节课程中我们编写了自定义滚动条的html代码和css脚本，但是他只是将滚动条的固定效果做出来了，但是还不能滚动，为了能使其能像浏览器的滚动条一样正常的滚动我们必须为其书写滚动脚本， 
这也就是这节课的主题所在。

基础知识准备$.extend的函数讲解

• 以下是$.extend函数的定义 
  

其主要有三种用法

• 只传入一个参数数，它会为jQuery对象本身增加属性或方法 
  
• 如果传递两个参数时，她会将第二个参数的属性合并到第一个对象中，并把合并后的属性增加到jQuery对象中 
  
• 第三种调用方式，其实也可以叫做属性的深拷贝模式 
  
  

交互脚本的代码组织结构

<script type="text/javascript">
            "use strict";
            (function (win,doc,$){
                //构造函数
                function CusScrollBar(options){
                    this._init(options);
                }
                /*把以下初始化方法重写为下面使用extend方法实现的方式
                 * CusScrollBar.prototype._init = function(){
                    console.log("test");
                }*/
                $.extend(CusScrollBar.prototype, {
                    _init:function(options){
                        var self = this;
                        self.options = {
                            scrollDir            : "y", //滚动方向
                            contSelector        : "",  //滚动内容区选择器
                            barSelector            : "",  //滚动条选择器
                            sliderSelector        : ""   //滚动滑块选择器
                        }
                        ;
                        $.extend(true,self.options,options || {});
                    }
                });
                win.CusScrollBar = CusScrollBar;
            })(window,document,jQuery);
            //测试代码
            var temp = new CusScrollBar({
                contSelector        : ".scroll-wrap",  //滚动内容区选择器
                barSelector            : ".scroll-bar",  //滚动条选择器
                sliderSelector        : ".scroll-slider"   //滚动滑块选择器
            });
            var temp2 = new CusScrollBar({
                contSelector        : ".scroll-wrap2",  //滚动内容区选择器
                barSelector            : ".scroll-bar2",  //滚动条选择器
                sliderSelector        : ".scroll-slider2"   //滚动滑块选择器
            });
            console.log(temp);
            console.log(temp2);
        </script>             

请您注意

·自觉遵守：爱国、守法、自律、真实、文明的原则
·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品，NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款