使用window.MutationObserver技术和jquery.nicescroll.js组件l封装通用滚动条插件

最新推荐文章于 2024-06-17 09:36:38 发布

yecats

最新推荐文章于 2024-06-17 09:36:38 发布

阅读量669

点赞数 2

分类专栏： JQuery 技术理论文章标签： MutationObserver nicescroll 滚动条

本文链接：https://blog.csdn.net/yecats/article/details/98881557

版权

JQuery 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

技术理论

2 篇文章 0 订阅

订阅专栏


(function ($) {

    //=====启动轮子
    var openMutationObserver = function (controlID, options) {
        var ID = controlID;
        //MutationObserver监听

        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
        var observer = new MutationObserver(function () {
            options.resizeNiceScroll();
        });
        observer.observe(document.getElementById(ID), { attributes: true, subtree: true, attributeFilter: ['style'], attributeOldValue: true });
    }
    //=====窗体调整
    var windowResize = function (controlID, options) {
        var ID = controlID;
        jQuery(window).resize(function () {
            options.resizeNiceScroll();
        });

    }


    //初始化
    var init = function (contains, options) {
        var controlID = options.id;
        //1 窗体调整 
        windowResize(controlID, options);
        //2 启动监听
        openMutationObserver(controlID, options);
        //3 加载滚动条
        options.reLoadNiceScroll();

        return options;//返回
    };


    //main #container
    $.fn.extend({
        lzscroll: function (options) {
            var defaults = {
                id: "",
                cursoropacitymax: 0.9,
                cursorwidth: "8px",
                cursorcolor: "#ccc",
                resizeNiceScroll: function () {
                    //计算滚动条
                    jQuery("#" + this.id).getNiceScroll().resize();
                },
                reLoadNiceScroll: function () {
                    //重载滚动条
                    jQuery("#" + this.id).niceScroll({ cursoropacitymax: this.cursoropacitymax, cursorwidth: this.cursorwidth, cursorcolor: this.cursorcolor });
                },
                removeNiceScroll: function () {
                    //移除滚动条
                    jQuery("#" + this.id).getNiceScroll().remove();
                }
            }
            var options = jQuery.extend(defaults, options);

            //入口点
            return init(this, options);
        }
    });

})(jQuery);
/*
//=======入口
jQuery(document).ready(function () {
    //接受返回操作对象
    window.lzscroll = jQuery("body").lzscroll({
        id: "Lzcontleft",
        removeNiceScroll: function () {
            //移除滚动条
            jQuery("#" + this.id).getNiceScroll().remove();
            jQuery("#" + this.id).removeAttr("style");
        }
    });
});
*/