文字无缝滚动

html

 <div id="scrollContent">
    <div class="scrollContentTranslate">
        <p id="scroll1">内容纯属娱乐，暂不向未满18岁青少年提供服务。严格按照法律法规和用户协议对您的信息进行全方位的保护，请放心使用。<span></span> </p>
        <p id="scroll2"></p>
    </div>
 </div>
<script> 
  indexScroll.init() 
</script>

css

#scrollContent {
    width: 93%;
    margin: 0 auto 2.5rem;
    padding-left: .4rem;
    overflow: hidden;

    .scrollContentTranslate {
        float: left;
        width: auto;
        min-width: 8000%;
    }

    #scroll1,
    #scroll2 {
        float: left;
        font-size: .32rem;
        color: #fff;
        white-space: nowrap;

        span {
            display: inline-block;
            width: 3.67rem;
        }
    }
}

js

var indexScroll = {
    init: function () {
        var speed = 50; //数字越大速度越慢
        var tab = document.getElementById("scrollContent");
        var tab1 = document.getElementById("scroll1");
        var tab2 = document.getElementById("scroll2");
        tab2.innerHTML = tab1.innerHTML;
        function Marquee() {
            if (tab2.offsetWidth - tab.scrollLeft <= 0)
                tab.scrollLeft -= tab1.offsetWidth
            else {
                tab.scrollLeft++;
            }
        }
        setInterval(Marquee, speed);
    }
}