分享一则JavaScript滚动条插件源码

2020-05-23 06:21:34易采站长站整理

        * context:内容Dom
        * scrollRadix:滚动基数
        * target:容器Dom
        */
        //当前this对象,为防止this指针在环境中会经常改变(例如绑定事件的时候),所以将当前对象保存起来
        var currScroll = this;
        //DOMElement
        if (dom.nodeType) {
            //保存容器和内容DOM
            currScroll.target = dom;
            currScroll.context = dom.firstChild;
            //合并配置参数
            currScroll.options = tool.extend(config, options);
            if (currScroll.options.width !== ‘auto’) {
                dom.style.width = tool.convertValue(currScroll.options.width);
            }
            if (currScroll.options.height !== ‘auto’) {
                dom.style.height = tool.convertValue(currScroll.options.height);
            }
            //查找到有效的dom
            while (currScroll.context.nodeType != 1) {
                currScroll.context = currScroll.context.nextSibling;
            }
            //创建滚动条dom
            currScroll.scrollUl = document.createElement(‘ul’);
            currScroll.scrollUl.className = ‘lf_Scroll’;
            currScroll.scrollUl.appendChild(tool.setClass(‘li’, ‘lfs_Top’));
            currScroll.scrollUl.appendChild(tool.setClass(‘li’, ‘lfs_Center’));
            currScroll.scrollUl.appendChild(tool.setClass(‘li’, ‘lfs_Bottom’));