文字无缝滚动可以使用现成的组件实现，但总感觉有点杀鸡用牛刀的感觉，而且网上的东西太杂乱，即使找到一个可用的组件，在参考资料很少的情况下也需要花费大量的精力，所以还不如自己纯手工实现一个，其主要的原理就是使用js修改文字warpper的trasform属性，然后加上相应的位置判断，当文字滚动超出了wrapper的范围，就重新回到初始位置，这样来回就可以实现文字的无缝滚动了。

项目是基于vue的，但具体实现使用的是原生js方法，简单修改可用于一般项目当中

html

<div id="center-bottom-board">
                <div class="wrapper" ref='wrapper'>
                    <div ref='marquee' style="text-align: left;width: 2000px;">
                        <span ref='marqueeContent'>要滚动的文字</span>
                    </div>
                </div>
            </div>

需要注意的点

• marquee要设置一个很宽的宽度，这样可以避免文字过长的时候被系统回车成多行，这里可以灵活设置
• text-align属性设置为left

js

 //底下的走马灯
            move() {
                let wrapper = this.$refs.wrapper;
                let wrapperWidth = wrapper.getBoundingClientRect().width;
                let marquee = this.$refs.marquee;
                marquee.style.transform = 'translateX(' + wrapperWidth + 'px)';
                let marqueeContent = this.$refs.marqueeContent;
                let contentWidth = marqueeContent.getBoundingClientRect().width;
                let distance = wrapperWidth;
                setInterval(() => {
                    //当文字移动超出wrapper的左侧时 则归位
                    if (marquee.getBoundingClientRect().x + contentWidth < wrapper.getBoundingClientRect().x) {
                        distance = wrapperWidth;
                    }
                    distance--;
                    this.$refs.marquee.style.transform = 'translateX(' + distance + 'px)';
                }, 20);
         },

将move()函数放到Vue的mounted()函数当中，就可以实现打开页面即开始滚动。