vue或css动画实现列表向上无缝滚动

html

 

   

     
   

 

css:使用纯css动画实现数据向上滚动 

@keyframes scrollTop {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
  }
}
.b_list{
  height: 19rem;
  overflow: hidden;
}
 
.b_scroll{
   -webkit-animation: 10s scrollTop linear infinite normal;
   animation: 10s scrollTop linear infinite normal;
} 

二、使用scrollTop方法向上滚动

scrolltolowerOne() {
                this.breakfastScrollInterval = setInterval(() => {
                    let div = document.getElementById('breakfastList');
                    if (div) {
                        if (div.scrollTop + div.offsetHeight >= div.scrollHeight) {
                            this.breakfastScrollTop = 0;
                        } else {
                            this.breakfastScrollTop += 1;
                        }
                        div.scrollTop = this.breakfastScrollTop;
                    } else {
                        clearInterval(this.breakfastScrollInterval);
                        this.breakfastScrollInterval = null;
                    }
                }, 50)
            },