js 滚动条 兼容移动端，pc端

export default class ttScrollBar {
    constructor(options) {
        // container, //要加滚动条的对象,(注意该对象的高度是否真实准确)
        // rollScale // 滚动速度
        // scrollDValue: 0 //滚动的差值,上下凹圆的尺寸和
        this.options = { ...ttScrollBar.options, ...options }; //获取配置参数
        if (!this.options.container) {
            throw ("container 参数没有配置");
        } 
        this.VarInterval = 0
        this.VarTimeout = ""
        this.created_bar = this.created_bar.bind(this);
        this.setScrollTransition = this.setScrollTransition.bind(this)
        this.touchmove = this.touchmove.bind(this);
        this.touchstart = this.touchstart.bind(this);
        this.touchend = this.touchend.bind(this);
        this.mouseWheel = this.mouseWheel.bind(this);
        this.doMove = this.doMove.bind(this);
        this.setTop = this.setTop.bind(this);
        this.calculated_size = this.calculated_size.bind(this)
        this.window_resize = this.window_resize.bind(this)
        this.mousemove = this.mousemove.bind(this);
        this.dragDown = this.dragDown.bind(this);
        this.dragMove = this.dragMove.bind(this);
        this.dragUp = this.dragUp.bind(this);
        this.getEvent = this.getEvent.bind(this);
        this.showScroll = this.showScroll.bind(this);
        this.correct = this.correct.bind(this);
         
        this.init = this.init.call(this, []);
    }
 
    static coordinate = [];
    static $options = [];
    static options = {
        focusObj: 'scroll', // 触发的节点当前默认为父节点，其他的没写
        rollScale: 10, // 滚动速度
        scrollDValue: 0, //滚动的差值,上下凹圆的尺寸和
        direction: "top", // 滚动方向 top  bottom
        options: {
            scroll_bottom_offset: 20, // 滚动到底部触发事件 移动端
            onScrollBottom() { }, // 滚动到底部触发事件
            onFetching: false, // 底部滚动数据请求状态
            container: "", // 节点容器'
            touchMoveStartTime: 0, // 手指停留时间 触摸
            touchMoveEndTime: 0, // 手指停留时间 离开 
            touchStartY: 0,
            touchEndY: 0,
        }
    }
    static getInstance($config) {
        if (!this.$pool) {
            this.$pool = [];
        }
        if (this.$pool.indexOf($config.container) == -1) {
            this.$pool.push($config.container);
            new this($config);
        }
    }
    init() {
        // 创建滚动条
        this.created_bar();
        this.preventBubble();
 
        // 计算属性并绑定事件
        this.calculated_size()
        this.addEvent(ttScrollBar.$options[this.ei].scrollHandle, 'mousedown', this.dragDown);
        this.addEvent(ttScrollBar.$options[this.ei].scroll, 'mousemove', this.mousemove);
        this.addEvent(ttScrollBar.$options[this.ei].focusObj, 'touchstart', this.touchstart);
        this.addEvent(ttScrollBar.$options[this.ei].focusObj, 'touchmove', this.touchmove);
        this.addEvent(ttScrollBar.$options[this.ei].focusObj, 'touchend', this.touchend);
        this.addEvent(ttScrollBar.$options[this.ei].focusObj, 'mousewheel', this.mouseWheel);
        this.addEvent(ttScrollBar.$options[this.ei].focusObj, 'DOMMouseScroll', this.mouseWheel);
 
        this.window_resize()
    }
    // 创建dom
    created_bar() {
        // 创建滚动条
        let opt = this.options; // dom 节点
        let parent = opt.container.parentNode; //当前节点的父节点
        let scroll = document.createElement('div'); // 包裹当前节点的div
        let scrollBar = document.createElement('div'); // 滚动条 box
        let scrollUp = document.createElement('div'); // 滚动条 top 装饰
        let scrollHandle = document.createElement('div'); // 滚动条显示方块
        let scrollDown = document.createElement('div'); // 滚动条 bottom 装饰 
        ;
        // -webkit-transition: all 0.1s;
        // transition: all 0.1s;
        // 给滚动条添加class 
        scrollBar.className = 'scrollBar';
        scrollBar.style.width = '6px';
        scrollBar.style.height = '100%';
        scrollBar.style.position = 'absolute';
        scrollBar.style.top = '0';
        scrollBar.style.right = '4px';
        scrollBar.style["-webkit-transition"] = 'all 0.3s';
        scrollBar.style.transition = 'all 0.3s';
        scrollBar.style.opacity = '0';
        scrollBar.style.zIndex = '3';
        // scrollUp.className = 'scrollUp';
        scrollHandle.className = 'scrollHandle';
        scrollHandle.style.width = '100%';
        scrollHandle.style.position = 'absolute';
        scrollHandle.style.top = '0';
        scrollHandle.style.right = '0';
        scrollHandle.style.borderRadius = '10px';
        scrollHandle.style.background = '#cccccc';
 
        // scrollDown.className = 'scrollDown';
        // 完成滚动条 div 嵌套
        scrollBar.appendChild(scrollUp);
        scrollBar.appendChild(scrollHandle);
        scrollBar.appendChild(scrollDown);
 
        // 给 还没有 包裹本节点的标签添加样式
        // scroll.style.width = parent.clientWidth + 'px';
        scroll.style.width = '100%';
        scroll.style.position = 'absolute';
        // 给父节点 添加样式
        if (this.getStyle(parent, 'position') == 'static') {
            parent.style.position = 'relative';
        }
        if (this.getStyle(parent, 'overflow') == 'visible') {
            parent.style.overflow = 'hidden';
        }
        parent.className += ' scroll_parent';
 
        // 当前节点嵌套自定义父节点
        scroll.appendChild(opt.container);
        // 全部放入同一个节点中
        parent.appendChild(scrollBar);
        parent.appendChild(scroll);
 
        ttScrollBar.coordinate.push({
            x: parent.offsetLeft,
            y: parent.offsetTop,
            max_x: parent.offsetLeft + parent.offsetWidth,
            max_y: parent.offsetTop + parent.offsetHeight,
        })
        ttScrollBar.$options.push({
            options: this.options,
            parent: parent,
            scroll: scroll,
            scrollBar: scrollBar,
            scrollHandle: scrollHandle,
            scrollUp: scrollUp,
            scrollDown: scrollDown,
            old_scroll_height: 0,
            onmousewheel: false,
            touchX: 0,
            touchY: 0,
            old_scrollHandle_top: 0, // 滚动条上次滚动高度
            old_scroll_top: 0 // 内容区域 上一次滚动高度
 
        })
        this.ei = ttScrollBar.coordinate.length - 1;
        this.setScrollTransition(0.03)
    }
    setScrollTransition(time){ 
        ttScrollBar.$options[this.ei].scroll.style["-webkit-transition"] = 'all '+ time +'s';
        ttScrollBar.$options[this.ei].scroll.style.transition =  'all '+ time +'s';
    }
    // 计算尺寸
    calculated_size() {
        let opt = ttScrollBar.$options[this.ei].options; // dom 节点   
        // console.log(opt.container.clientHeight,ttScrollBar.$options[this.ei].parent.clientHeight)
        // 获取当前到dom和父级dom 相差尺寸  === 滚动最大距离
        ttScrollBar.$options[this.ei].roll_max_size = opt.container.clientHeight - ttScrollBar.$options[this.ei].parent.clientHeight;
        // 获取滚动条和页面滚动距离的 比率
        ttScrollBar.$options[this.ei].rate = ttScrollBar.$options[this.ei].parent.clientHeight / opt.container.clientHeight;
        // 设置滚动条高度
        if (ttScrollBar.$options[this.ei].roll_max_size <= 0) {
 
            ttScrollBar.$options[this.ei].old_scrollHandle_top = 0 // 滚动条上次滚动高度
            ttScrollBar.$options[this.ei].old_scroll_top = 0 // 内容区域 上一次滚动高度
 
            ttScrollBar.$options[this.ei].scrollHandle.style.height = 0;
            ttScrollBar.$options[this.ei].scroll.style.top = 0
            ttScrollBar.$options[this.ei].scrollHandle.style.top = 0
 
        } else {
            ttScrollBar.$options[this.ei].scrollHandle.style.height = ttScrollBar.$options[this.ei].rate * ttScrollBar.$options[this.ei].parent.clientHeight + "px";
 
            // let scroll_top = (ttScrollBar.$options[this.ei].scroll.style.top && ttScrollBar.$options[this.ei].scroll.style.top.replace("px", "")) || 0;
            // 当高度
            let scroll_top = ttScrollBar.$options[this.ei].old_scroll_top || 0;
            // 如果滚动高度 大于最大高度
            if (Math.abs(parseInt(scroll_top)) > ttScrollBar.$options[this.ei].roll_max_size) {
                ttScrollBar.$options[this.ei].old_scroll_top = -ttScrollBar.$options[this.ei].roll_max_size
                ttScrollBar.$options[this.ei].old_scrollHandle_top = ttScrollBar.$options[this.ei].roll_max_size * ttScrollBar.$options[this.ei].rate
 
                ttScrollBar.$options[this.ei].scroll.style.top = ttScrollBar.$options[this.ei].old_scroll_tope + 'px';
                ttScrollBar.$options[this.ei].scrollHandle.style.top = ttScrollBar.$options[this.ei].old_scrollHandle_top + 'px'
            }
        }
 
        // 获取滚动条最大滚动高度 和最小滚动高度
        ttScrollBar.$options[this.ei].maxH = ttScrollBar.$options[this.ei].scrollBar.clientHeight - ttScrollBar.$options[this.ei].scrollUp.clientHeight + opt.scrollDValue / 2 - ttScrollBar.$options[this.ei].scrollHandle.clientHeight;
        ttScrollBar.$options[this.ei].minH = ttScrollBar.$options[this.ei].scrollUp.clientHeight - opt.scrollDValue / 2;
 
        // 存储旧的值 当容器高度随时发生变化
        ttScrollBar.$options[this.ei].old_scroll_height = ttScrollBar.$options[this.ei].scroll.offsetHeight
 
        // 获取鼠标滚动对象
        ttScrollBar.$options[this.ei].focusObj = ttScrollBar.$options[this.ei].options.focusObj == 'scroll' ? ttScrollBar.$options[this.ei].parent : (ttScrollBar.$options[this.ei].options.focusObj == 'scrollBar' ? ttScrollBar.$options[this.ei].scrollBar : document);
        // // 重新绑定事件
        // if (ttScrollBar.$options[this.ei].scroll.offsetHeight < ttScrollBar.$options[this.ei].parent.clientHeight &&  ttScrollBar.$options[this.ei].onmousewheel) {
        //     ttScrollBar.$options[this.ei].onmousewheel = false;
        //     this.delEvent(ttScrollBar.$options[this.ei].focusObj, 'DOMMouseScroll', this.mouseWheel);
        //     this.delEvent(ttScrollBar.$options[this.ei].focusObj, 'mousewheel', this.mouseWheel);
        // }
        // else if(!ttScrollBar.$options[this.ei].onmousewheel){ 
        //     ttScrollBar.$options[this.ei].onmousewheel = true;
        //     this.addEvent(ttScrollBar.$options[this.ei].focusObj, 'mousewheel', this.mouseWheel);
        //     this.addEvent(ttScrollBar.$options[this.ei].focusObj, 'DOMMouseScroll', this.mouseWheel);
        // }
    }
    // 重新计算
    window_resize() {
        let debounce = this.debounce(() => {
            ttScrollBar.$options.map((item, index) => {
                this.ei = index;
                this.calculated_size()
            })
        }, 300)
        window.onresize = () => {
            debounce()
        }
    }
    observer() {
        // Firefox和Chrome早期版本中带有前缀
        let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
        // 选择目标节点
        let target = this.parent;
        // 创建观察者对象
        let observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                // console.log(mutation)
            });
        });
        // 配置观察选项:
        let config = {
            attributes: true,//检测属性变动
            childList: true,//检测子节点变动
            characterData: true,//节点内容或节点文本的变动。 
        }
        // 传入目标节点和观察选项
        observer.observe(target, config);
        // /停止观察
        //  observer.disconnect();  
    }
    // 获取样式内容
    getStyle(o, type) {
        return o.currentStyle ? o.currentStyle[type] : getComputedStyle(o, false)[type];
    }
    dragDown(e) {
        var ev = e || window.event;
        this._posY = this._y = ev.clientY - ttScrollBar.$options[this.ei].scrollHandle.offsetTop;
        this.addEvent(document, 'mousemove', this.dragMove);
        this.addEvent(document, 'mouseup', this.dragUp);
        ev.preventDefault && ev.preventDefault();
    }
    dragMove(e) {
        var ev = e || window.event,
            top = ev.clientY - this._y;
        this.showScroll()
        // 滚动条
        // 最大top值
        let roll_max_size = ttScrollBar.$options[this.ei].roll_max_size * ttScrollBar.$options[this.ei].rate;
        // 内容滚动距离
        let stop = top / ttScrollBar.$options[this.ei].rate;
        if (top < 0) {
            ttScrollBar.$options[this.ei].old_scrollHandle_top = 0 // 滚动条上次滚动高度
            ttScrollBar.$options[this.ei].old_scroll_top = 0 // 内容区域 上一次滚动高度
            ttScrollBar.$options[this.ei].scrollHandle.style.top = 0
            ttScrollBar.$options[this.ei].scroll.style.top = 0
        } else if (roll_max_size < top) {
            ttScrollBar.$options[this.ei].old_scrollHandle_top = roll_max_size // 滚动条上次滚动高度
            ttScrollBar.$options[this.ei].old_scroll_top = -ttScrollBar.$options[this.ei].roll_max_size // 内容区域 上一次滚动高度
 
            ttScrollBar.$options[this.ei].scrollHandle.style.top = roll_max_size + 'px'
            ttScrollBar.$options[this.ei].scroll.style.top = -ttScrollBar.$options[this.ei].roll_max_size + 'px'
        } else {
            ttScrollBar.$options[this.ei].old_scrollHandle_top = top // 滚动条上次滚动高度
            ttScrollBar.$options[this.ei].old_scroll_top = -stop // 内容区域 上一次滚动高度
 
            ttScrollBar.$options[this.ei].scrollHandle.style.top = top + 'px'
            ttScrollBar.$options[this.ei].scroll.style.top = -stop + 'px'
        }
    }
    dragUp(e) {
        this.delEvent(document, 'mousemove', this.dragMove);
        this.delEvent(document, 'mouseup', this.dragUp);
    }
    touchstart(e) {
        let ev = e || window.event;
        clearTimeout(this.VarTimeout)
        let touchX = ev.touches ? event.touches[0].clientX : event.screenX;
        let touchY = ev.touches ? event.touches[0].clientY : event.screenY;
        let target = event.srcElement || event.target;
        this.setScrollTransition(0.02) 
        this.getEvent(touchX, touchY, target);  // 容器高度发生变化
        if (ttScrollBar.$options[this.ei].old_scroll_height != ttScrollBar.$options[this.ei].scroll.offsetHeight) {
            this.calculated_size()
        }
        // touchMoveStartTime:0, // 手指停留时间 触摸
        // touchMoveEndTime:0, // 手指停留时间 离开
        ttScrollBar.$options[this.ei].options.touchMoveStartTime = new Date().getTime()
        ttScrollBar.$options[this.ei].touchY = touchY
        ttScrollBar.$options[this.ei].touchX = touchX
        ttScrollBar.$options[this.ei].options.touchStartY = touchY
    }
    touchmove(e) {
        let ev = e || window.event;
        let touchX = ev.touches ? event.touches[0].clientX : event.screenX;
        let touchY = ev.touches ? event.touches[0].clientY : event.screenY;
        ttScrollBar.$options[this.ei].options.touchEndY = touchY
        this.dotouchMove(ttScrollBar.$options[this.ei].scrollHandle, ttScrollBar.$options[this.ei].touchY - touchY)
        this.dotouchMove(ttScrollBar.$options[this.ei].scroll, ttScrollBar.$options[this.ei].touchY - touchY)
        ttScrollBar.$options[this.ei].touchY = touchY // 实时记录
        // dotouchMove
        // console.log("touchmove")
    }
    touchend(e) {
        if(!ttScrollBar.$options[this.ei].options.touchEndY) return
        ttScrollBar.$options[this.ei].options.touchMoveEndTime = new Date().getTime()
        // top  bottom
        let touchTime = ttScrollBar.$options[this.ei].options.touchMoveEndTime - ttScrollBar.$options[this.ei].options.touchMoveStartTime
        let touchLength = ttScrollBar.$options[this.ei].options.touchStartY - ttScrollBar.$options[this.ei].options.touchEndY
        this.correct()
        // 快速滑动效果
        if (touchTime < 280) {
            let vb = touchLength / touchTime   
            let THeight = (vb + 1) * 200
            this.setScrollTransition(touchTime/200)
            this.dotouchMove(ttScrollBar.$options[this.ei].scrollHandle, THeight)
            this.dotouchMove(ttScrollBar.$options[this.ei].scroll, THeight)
            this.VarTimeout = setTimeout(() => {
                this.correct()
            }, Math.ceil(touchTime/200));
        } 
        // 重置
        ttScrollBar.$options[this.ei].options.touchEndY = 0
        ttScrollBar.$options[this.ei].options.touchStartY  = 0
    }
    // 手指滚动 超过最大距离复位 
    correct(){
        let MyScll =  ttScrollBar.$options[this.ei].scroll
        let old_top = (MyScll.style.top && MyScll.style.top.replace("px", "")) || 0;
        if(ttScrollBar.$options[this.ei].direction == 'top'){
            if( Math.abs(parseInt(old_top)) > ttScrollBar.$options[this.ei].roll_max_size ){
                this.setScrollTransition(0.3)
                MyScll.style.top = -ttScrollBar.$options[this.ei].roll_max_size + 'px' 
            }
        }else{
 
        }
    }
    // 如何滚动
    mouseWheel(e) {
        let ev = e || window.event;
        let flag = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
        let target = event.srcElement || event.target;
        // 滚动并获取当前是那个页面
        this.getEvent(ev.clientX, ev.clientY, target);
        this.showScroll()
        // 容器高度发生变化
        if (ttScrollBar.$options[this.ei].old_scroll_height != ttScrollBar.$options[this.ei].scroll.offsetHeight) {
            this.calculated_size()
        }
        // dom滚动 和 滚动条滚动
        this.doMove(ttScrollBar.$options[this.ei].scrollHandle, flag)
        this.doMove(ttScrollBar.$options[this.ei].scroll, flag)
        ev.preventDefault && ev.preventDefault();
    }
    // 冲新计算
    mousemove() {
        // 容器高度发生变化
        if (ttScrollBar.$options[this.ei].old_scroll_height != ttScrollBar.$options[this.ei].scroll.offsetHeight) {
            this.calculated_size()
        }
    }
    //阻止冒泡
    preventBubble() {
        ttScrollBar.$options[this.ei].scrollHandle.onclick = function (ev) {
            var oEvent = ev || window.event;
            oEvent.stopPropagation ? oEvent.stopPropagation() : (oEvent.cancelBubble = true);
        }
    }
    // 设置要滚动的距离
    setTop(flag) {
        let top = (ttScrollBar.$options[this.ei].scroll.offsetHeight - ttScrollBar.$options[this.ei].parent.clientHeight) / (ttScrollBar.$options[this.ei].maxH - ttScrollBar.$options[this.ei].minH) * (ttScrollBar.$options[this.ei].options.rollScale);
        top = top < 24 ? 24 : top;
        return flag ? parseInt(-top) : parseInt(top);
    }
    onScrollBottom() {
        if (ttScrollBar.$options[this.ei].options.onFetching) return
        ttScrollBar.$options[this.ei].options.onFetching = true
        setTimeout(() => {
            ttScrollBar.$options[this.ei].options.onScrollBottom(() => {
                this.calculated_size()
                ttScrollBar.$options[this.ei].options.onFetching = false
            })
        }, 1000)
    }
    dotouchMove(o, speed) {
        // if(!touchLength) return;
        let old_top = (o.style.top && o.style.top.replace("px", "")) || 0;
        if (ttScrollBar.$options[this.ei].scrollHandle == o) {
            // 滚动条  
            old_top = parseInt(old_top) + ttScrollBar.$options[this.ei].rate * speed;
            let roll_max_size = ttScrollBar.$options[this.ei].roll_max_size * ttScrollBar.$options[this.ei].rate;
            if (old_top <= 0) {
                o.style.top = 0
            } else if (old_top >= roll_max_size) {
                o.style.top = roll_max_size + 'px'
 
            } else {
                o.style.top = old_top + 'px'
            }
        } else if (ttScrollBar.$options[this.ei].scroll == o) {
            ttScrollBar.$options[this.ei].direction = speed > 0 ? 'top' : 'bottom'
            old_top = parseInt(old_top) - speed;
            if ((ttScrollBar.$options[this.ei].roll_max_size + old_top) <= ttScrollBar.$options[this.ei].options.scroll_bottom_offset) {
                this.onScrollBottom()
            }
            if (ttScrollBar.$options[this.ei].roll_max_size <= 0) return;
            // 内容区域滚动
            if (old_top <= -ttScrollBar.$options[this.ei].roll_max_size) {
                o.style.top = old_top + 'px'
                // this.setScrollTransition(0.2)
                // o.style.top = -ttScrollBar.$options[this.ei].roll_max_size + 'px' 
            } else if (old_top >= 0) {
                o.style.top = 0  
            } else {
                o.style.top = old_top + 'px'
            }
        }
    }
    /**
         *  pc 机上操作 每触发一次就滚动指定距离
         * @param {滚动DoM} o 
         * @param {滚动方向} flag 
         */
    doMove(o, flag) {
        // 获取滚动间距
        let speed = this.setTop(flag);
 
        let old_top = (o.style.top && o.style.top.replace("px", "")) || 0;
 
        if (ttScrollBar.$options[this.ei].scrollHandle == o) {
            // 滚动条滚动
            if (speed > 0) {
                speed = -(ttScrollBar.$options[this.ei].rate * speed)
            } else {
                speed = Math.abs(ttScrollBar.$options[this.ei].rate * speed);
            }
 
            old_top = ttScrollBar.$options[this.ei].old_scrollHandle_top + speed;
            let roll_max_size = ttScrollBar.$options[this.ei].roll_max_size * ttScrollBar.$options[this.ei].rate;
            if (old_top <= 0) {
                ttScrollBar.$options[this.ei].old_scrollHandle_top = 0
                o.style.top = 0
            } else if (old_top >= roll_max_size) {
                ttScrollBar.$options[this.ei].old_scrollHandle_top = roll_max_size
                o.style.top = roll_max_size + 'px'
            } else {
                ttScrollBar.$options[this.ei].old_scrollHandle_top = old_top
                o.style.top = old_top + 'px'
            }
        } else if (ttScrollBar.$options[this.ei].scroll == o) {
            old_top = ttScrollBar.$options[this.ei].old_scroll_top + speed;
            if (ttScrollBar.$options[this.ei].roll_max_size <= 0) return;
            // 内容区域滚动
            if (old_top <= -ttScrollBar.$options[this.ei].roll_max_size) {
                ttScrollBar.$options[this.ei].old_scroll_top = -ttScrollBar.$options[this.ei].roll_max_size
                o.style.top = -ttScrollBar.$options[this.ei].roll_max_size + 'px'
            } else if (old_top >= 0) {
                ttScrollBar.$options[this.ei].old_scroll_top = 0
                o.style.top = 0
            } else {
                ttScrollBar.$options[this.ei].old_scroll_top = old_top
                o.style.top = old_top + 'px'
            }
        }
    }
    // 控制滚动条显示
    showScroll(time = 3000) {
        ttScrollBar.$options[this.ei].scrollBar.style.opacity = '1';
        if (this.timeout !== null) clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            ttScrollBar.$options[this.ei].scrollBar.style.opacity = '0';
        }, time);
    }
    // 改变事件触发后的this指向
    bind(obj, fn) {
        return function () {
            return fn.apply(obj, arguments);
        }
    }
    addEvent(obj, oEv, fn) {
        return obj.attachEvent ? obj.attachEvent('on' + oEv, fn) : obj.addEventListener(oEv, fn, false);
    }
    delEvent(obj, oEv, fn) {
        return obj.detachEvent ? obj.detachEvent('on' + oEv, fn) : obj.removeEventListener(oEv, fn, false);
    }
    genID(length) {
 
        return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
 
    }
    debounce(fn, wait) {
        var timeout = null;
        return function () {
            if (timeout !== null) clearTimeout(timeout);
            timeout = setTimeout(fn, wait);
        }
    }
    getEvent(x, y, target) {
        for (let i = 0; i < ttScrollBar.coordinate.length; i++)
            if (x < ttScrollBar.coordinate[i].max_x && x > ttScrollBar.coordinate[i].x && y < ttScrollBar.coordinate[i].max_y && y > ttScrollBar.coordinate[i].y && this.isChildOf(target, ttScrollBar.$options[i].options.container)) {
                this.ei = i
                return i;
            }
    }
    isChildOf(child, parent) {
        var parentNode;
        if (child && parent) {
            parentNode = child.parentNode;
            while (parentNode) {
                if (parent == parentNode) {
                    return true;
                }
                parentNode = parentNode.parentNode;
            }
        }
        return false;
    }
 
}

如何使用

// 绑定的dom需要添加一个父节点
// 父节点必须的样式  { width: 必须指定宽; position: relative; height: 必须指定高; }
<div class="product_box"><div class="product_list" ref="knowledge_point_form" ></div></div>
 
import ttScrollBar from "@/utils/scroll_view.js";
 
mounted() {
 
    new ttScrollBar({
      container: this.$refs.myScroller,
      scroll_bottom_offset: 20,
      onScrollBottom: callback => {
        this.scrollerLoading = true;
        this.scrollerLoadingText = "数据加载中"; // 数据加载中  加载成功
        this.onScrollBottom(callback);
      }
    });
},