有些地方需要显示完整的文本，但容器的宽度是固定死的，所以就需要滚动显示的功能。由于文本内容长短不一，只有溢出容器宽度的文本需要滚动显示，而短文本则保持静态显示。

具体框架需要两层结构，一个外层固定视窗，一个内层滚动文本。

1
2
3
<div id="A">
    <a id="B">长长长长长长长长长长长长长长长文本</a>
</div>

首先确定滚动的路径，要想使得滚动动效无缝衔接，那么就让B从A的右端点出发，向左滚动，直到B的右端点到达A的左端点。通过@keyframes来创建动画的关键帧规则，一般以视窗A的左端点为O点，那么起点位置为A的右端点横坐标A.offsetWidth（实测为200px），终点位置为终止时B的左端点横坐标-B.offsetWidth（即-100%，此处%是相对于B来说）。
位移轨迹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@keyframes marquee {
    0% {
        transform: translateX(200px);
    }

    100% {
        transform: translateX(-100%);
    }
}

#A {
    display: flex;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出部分隐藏 */
}

通过js判断是否为长文本，长文本则开启滚动显示。这里设置为无限滚动，每次滚动10s。可根据需要控制总滚动时长，也可以替换成注释部分，则为匀速滚动。

1
2
3
4
5
6
7
8
9
10
11
const marqueeContainer = document.getElementById('A');
const marqueeContent = document.getElementById('B');
function marquee() {
    if (marqueeContent.offsetWidth > marqueeContainer.offsetWidth) {
        // var speed = marqueeContent.offsetWidth / marqueeContainer.offsetWidth * 5
        // marqueeContent.style.animation = 'marquee ' + speed + 's linear infinite'
        marqueeContent.style.animation = 'marquee 10s linear infinite'
    } else {
        marqueeContent.style.animation = ''
    }
}

最终效果如下：