无限滚动文本，无间隙且内容发生了动态变化

Question

So I have this issue with something like old deprecated <marquee> . Here's fiddle: https://jsfiddle.net/qbqz0kay/1/

It's one (and simpliest) of hundreds of attempts. I can't resolve main issues:

1. how to remove the gap between end and (new) beginning of the list (it should be like one infinitely scrolling sentence). I've tried with removing first li elements and adding them to the end but it affected overall dimensions of the list and in consequence - the animation was disrupted.
2. part of the list will be changing once in a while (site is connected to websocket) and every change in its content affect dimensions of the list also. So again - problem with stuttering animation occured.

Any ideas how to handle this? I've seen many ready-made examples but none of them handles those two issues.

Answer 1

Marquee can't help you in this case, as you can't achieve continuous scrolling using this element. Instead, just a bit of javascript might do the trick here. I tried this example which is also very well documented on my own blog and worked perfectly fine, more on this article: http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm