css 文本超出自动滚动

最新推荐文章于 2024-11-15 14:43:02 发布

「已注销」

最新推荐文章于 2024-11-15 14:43:02 发布

阅读量8.9k

点赞数 4

文章标签： css javascript js vue

本文链接：https://blog.csdn.net/EllynX/article/details/112464537

版权

假设滚动的这个东西类名为name

1. name的父元素宽度一定，且小于name的宽度，且父元素overflow: hidden;

2. 下面2.35rem是name的父元素的宽度, 可替换为别的

.name {
    white-space: nowrap;
}
.name.scroll {
    animation: 3s wordsLoop linear infinite;
}
@keyframes wordsLoop {
    0% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(0px);
    }
    75% {
        transform: translateX(calc(-100% + 2.35rem));
    }
    100% {
        transform: translateX(calc(-100% + 2.35rem));
    }
}

3. 当name宽度超过父元素宽度时，为其添加scroll类

以下是在vue中的操作：

1）绑定一个ref和一个scroll类

<div 
    class="name" 
    v-html="currentSong.name" 
    ref="songName1" 
    :class="{ scroll: nameScroll }">
</div>

2）data里加一个nameScroll: false

3) 2.35 * parseInt(document.querySelector('html').style.fontSize) 是我项目里name的父元素宽度，可以替换为别的。这段代码写在哪需要根据自己的项目调整，需要在name渲染之后调用。

if (this.$refs.songName1.clientWidth > 2.35 * parseInt(document.querySelector('html').style.fontSize)) {
    this.nameScroll = true
} else {
    this.nameScroll = false
}