How to achieve seamless list scrolling animation with vue or css

This article focuses on "how to achieve seamless list scrolling animation with vue or css". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve seamless list scrolling animation with vue or css".

The effect is as follows:

Method 1: the realization method of vue

Js

Export default {data () {return {timer: null, activityList: []}}, mounted () {this.$nextTick (() = > {this.rollUp ();});}, beforeDestroy () {this.timer = null; clearInterval (this.timer) }, methods: {/ * upstream broadcast * / rollUp () {let ul1 = document.getElementById ("publishMain1"); let ul2 = document.getElementById ("publishMain2"); let box = document.getElementById ("publishMain"); ul2 [XSS _ clean] = ul1 [XSS _ clean]; box.scrollTop = 0 Function rollStart () {if (box.scrollTop > = ul1.scrollHeight) {box.scrollTop = 0;} else {box.scrollTop++;}} this.timer = setInterval (rollStart, 50);}

Css

B _ list {height: 19remr; overflow: hidden;}

Method 2: pure css animation

Html

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 } at this point, I believe you have a deeper understanding of "how to achieve seamless list scrolling animation with vue or css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!