指令无缝滚动 和 有缝

import Vue from 'vue'

function scrollup(box,f){
    if(box.scrollTop>=f.offsetHeight){
        box.scrollTop=0;
    }else{
        box.scrollTop += 1;
    }
}

const map = new Map()
const childrenNodes = []


const hooks = {
    bind(el,binding){
        // let child = el.children[0]
        // el.appendChild(child.cloneNode(true))
        
        // var scrollMove=setInterval(scrollup.bind(null,el,child),30);//数值越大，滚动速度越慢

        // el.onmouseover=function(){
        //     clearInterval(scrollMove)
        // }
    
        // //鼠标离开时，滚动继续
        // el.onmouseout=function(){
        //     scrollMove=setInterval(scrollup.bind(null,el,child),30);
        // }
    },

    update(el){
        clearInterval(map.get(el))  
        setTimeout(()=>{
            let child = el.children[0]
            if( el.children[1]){
                el.removeChild(el.children[1])
            }
            if(el.clientHeight >= child.clientHeight) return
            el.appendChild(child.cloneNode(true))
            
            childrenNodes.push(...el.children)

            var scrollMove = setInterval(scrollup.bind(null,el,child),30);//数值越大，滚动速度越慢
            map.set(el,scrollMove)

            
            el.onmouseover=function(){
                clearInterval(scrollMove)
            }
            
            //鼠标离开时，滚动继续
            el.onmouseout=function(){
                scrollMove=setInterval(scrollup.bind(null,el,child),30);
                map.set(el,scrollMove)
            }
        })
        // let child = el.children[0]
        
        // setTimeout(()=>{
        //     var scrollMove=setInterval(scrollup.call(null,el,child),30);//数值越大，滚动速度越慢
        // })
    },
    
    unbind(el){
        // ob.unobserve(el)
    }
}

function registered(){
    Vue.directive('scroll',hooks)
}

export default {
    registered
}

有缝：

import Vue from 'vue'

function scrollup(box,f){
    if(box.scrollTop>=f.offsetHeight - box.offsetHeight){
        box.scrollTop=0;
    }else{
        box.scrollTop += 1;
    }
}

const map = new Map()
const childrenNodes = []


const hooks = {
    bind(el,binding){
        // el.addEventListener('scroll',(event)=>{
        //     if( event.target.scrollTop >= event.target.children[0].offsetHeight){
        //         event.target.scrollTop=0;
        //     }
    
        // })
    },

    update(el){
        clearInterval(map.get(el))  
        setTimeout(()=>{
            let child = el.children[0]
            // if( el.children[1]){
            //     el.removeChild(el.children[1])
            // }
            if(el.clientHeight >= child.clientHeight) return
            // el.appendChild(child.cloneNode(true))
            
            // childrenNodes.push(...el.children)

            var scrollMove = setInterval(scrollup.bind(null,el,child),30);//数值越大，滚动速度越慢
            map.set(el,scrollMove)

            
            el.onmouseover=function(){
                clearInterval(scrollMove)
            }
            
            //鼠标离开时，滚动继续
            el.onmouseout=function(){
                scrollMove=setInterval(scrollup.bind(null,el,child),30);
                map.set(el,scrollMove)
            }

            
        })
        // let child = el.children[0]
        
        // setTimeout(()=>{
        //     var scrollMove=setInterval(scrollup.call(null,el,child),30);//数值越大，滚动速度越慢
        // })
    },
    
    unbind(el){
        // ob.unobserve(el)
    }
}

function registered(){
    Vue.directive('scroll',hooks)
}

export default {
    registered
}