标签 marquee 下的文章

小问题,简单记一下

今天用 marquee 标签做滚动的时候,在 Chrome 下看效果没有问题,但是后来发现在手机微信上,每当内容滚动过 marquee 宽度的距离以后,就会重置重新从头滚动,这一点让我着实蛋疼了一下。。。。

然后后来排查的时候发现,是因为我在样式里给 marquee 设置了宽度(因为不想整个屏幕宽度滚动,所以就设置了一下宽度),然后就出现了问题,这个宽度被继承到 marquee 里面的滚动块上了,所以导致当滚动过这个距离以后,marquee 会以为滚动内容结束了,从而又重新滚动。

那么,当我们确实需要改变 marquee 的宽度的时候怎么办呢?

哈哈,给它外面加上一个 div,然后给 div 指定宽度就可以了

<style>
#marquee{
    width: 300px;
    ...
}
</style>
<div id="marquee">
    <marquee behavior="scroll" direction="left">
        我是内容我是内容我是内容我是内容
    </marquee>
</div>

嗯嗯,大概就是这样啦~

--------- 分割线诈尸 -----------

目前微信已经更新了 X5 内核的版本,已经不再支持 <marquee> 标签,所以做这种滚动的效果还是使用 Animation 来做喽~