js 文字无缝滚动 滚屏特效分析

https://blog.csdn.net/qq_39232387/article/details/107337189

需要手动创建一个一样的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .scrollCon {
                width: 500px;
                height: 150px;
                overflow: hidden;
            }
            ul,li {
                margin: 0;
                list-style: none;
            }
            li {
                height: 40px;
            }
        </style>
    </head>
    <body>
        <div class="scrollCon" id="scrollCon">
            <ul id="scrollCon1">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <ul id="scrollCon2">

            </ul>
        </div>
        <script type="text/javascript">
            var conScroll = function(){
                var scrollCon = document.getElementById("scrollCon");
                var li = scrollCon.getElementsByTagName("li");
                var scrollCon1 = document.getElementById("scrollCon1");
                var scrollCon2 = document.getElementById("scrollCon2");
                if(li.length > 3){
                    scrollCon2.innerHTML = scrollCon1.innerHTML;
                    scrollCon.scrollTop = 0;
                    function rollStart(){
                        if(scrollCon.scrollTop >= scrollCon1.scrollHeight){
                            scrollCon.scrollTop = 0;
                        }else{
                            scrollCon.scrollTop++;
                        }
                    }
                    var timer = setInterval(rollStart, 50);
                    scrollCon.onmouseover = function(){
                        clearInterval(timer);
                    }
                    scrollCon.onmouseout = function(){
                        timer = setInterval(rollStart, 50);
                    }
                }
            };
            conScroll();
        </script>
    </body>
</html>

以上demo其实并不完美，调试发现：
两个滚动的容器必须设置高度，而且最终结果发现滚动到一半就无法继续移动。
在纯demo里是没问题，但在使用场景里却不兼容。
故改成以下demo，用css的transform实现移动更加流畅

var conScroll = function(){
                    var mouseObj = parentBoxNode;
                    var moveObj = moveBox1Node;
                    var secondObj = moveBox2Node;
                    moveObj.style.transform = 'translateY(0px)';
                    var currentTop = 0;
                    function rollStart(){
                        if(Math.abs(currentTop) >= 262){
                            currentTop = 0;
                            moveObj.style.transform = 'translateY(0px)';
                            secondObj.style.transform = 'translateY(0px)';
                        } else {
                            currentTop --;
                            moveObj.style.transform = 'translateY(' + currentTop + 'px)';
                            secondObj.style.transform = 'translateY(' + currentTop + 'px)';
                        }
                    }
                    var timer = setInterval(rollStart, 50);
                    mouseObj.onmouseover = function(){
                        clearInterval(timer);
                    }
                    mouseObj.onmouseout = function(){
                        timer = setInterval(rollStart, 50);
                    }
                };
                conScroll();