js组件之----自定义滚动条

最新推荐文章于 2025-06-18 13:54:19 发布

IKnow00

最新推荐文章于 2025-06-18 13:54:19 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript jquery 文章标签： jquery javascript

本文链接：https://blog.youkuaiyun.com/qq_40457310/article/details/79133628

本文探讨了JavaScript和jQuery中自定义滚动条的方法。讲解了如何使用jQuery的extend方法进行对象扩展，包括浅拷贝和深拷贝。还提到了event.preventDefault()用于阻止事件默认行为，以及event.pageX和event.pageY获取事件坐标。此外，文章介绍了jQuery命名空间的使用，便于添加和删除特定事件。最后，提到了获取元素超出可视区高度的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知识点:

原生js一般都会将对象封装在window对象原型中, 而jquery也可以将对象封装在$中

jquery的extend方法共有三种调用方法:
1. 浅拷贝 $.extend(obj1, obj2)
2. 深拷贝 $.extend(true, obj1, obj2)
3. 位jquery原型添加对象$.extend({something: ...})之后就可以$.something调用.
event.preventDefault() 阻止事件的默认行为.
event.pageX, event.pageY 获取事件的坐标位置.
$('...').scrollTop()获取元素超出可视区顶部的高度.$('...')[index].scrollTop(val)当加入参数时可以设置元素的高度.
jquery的命名空间: event.something, 可以通过$(...).on('event.something', ...),$(...).off('.something')方便快捷的添加和删除指定的事件.

js文件:

(function($, win, doc) {
   
   
    function ScrollBar(opts) {
   
   
        this._init(opts);
    }

    /*********
     * $.extend
     * 有三种调用方法
     * 1.浅复制   $.extend(obj1, obj2) ===> obj1 成为obj2 的浅拷贝
     * 2.深复制   $.extend(true, obj1, obj2) ==> obj1 深拷贝  obj2
     * 3.为 $ 添加原型对象  $.extend({someobj: ...})  之后可以通过 $.someobj 调用
     * 
     * 
     */
    $.extend(ScrollBar.prototype, {
        /*****
         * 构造函数
         * @Method _init
         * @return {self}
         */
        _init: function(opts) {
   
   
            var self = this;
            self.opts = {
                scrollDir: 'y', //滚动方向
                contSelector: '', //滚动内容区
                barSelector: '', //滚动条
                sliderSelector: '', //滑块
                wheelStep: 15, //滚轮步长
                scrollItem: '', //选项按钮
                itemActiveClass: '', //选中状态
                anchor: '', //锚点
                article: '', //正文
                correctSelector: '' //校正
            };
            $.extend(true, self.opts, opts || {}); //深拷贝

            self._initDomEvent();


            return self;
        },
        /******
         * 初始化do操作
         * @Method _initDomEvent
         * @return {ScrollBar}
         */
        _initDomEvent: function() {
   
   
            var opts = this.opts;
            this.$doc = $(doc);
            this.$cont = $(opts.contSelector);
            // console.log(this.$cont);
            // console.log(this.$cont[0]);
            this.$slider = $(opts.sliderSelector);
            this.$bar = opts.barSelector ? $(opts.barSelector) :
                self.$slider.parent();
            this.$tabItem = $(opts.scrollItem);
            this.$anchor = $(opts.anchor);
            this.$article = $(opts.article);
            this.$correct = $(opts.correctSelector);
            // console.log(this.$article)
            // console.log(this.$correct)

            this._initArticleHeight()
                ._initSliderDragEvent()
                ._initTabEvent()
                ._bindContScroll()
                ._bindMousewheel();

        },
        /***
         * 初始化滑块拖动功能
         * @return {[object]} [this]
         * 
         */
        _initSliderDragEvent: function() {
   
   
            var self = this;
            var slider = self.$slider;

            if (slider) {
                console.log(slider)
                var doc = this.$doc,
                    dragStartPagePosition, //鼠标开始的位置
                    dragStartScrollPosition, //超出顶部的高度
                    dragContBarRate; //滚动条与内容高度的比值