手机下 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 来做喽~

标签: marquee

已有 2 条评论

  1. This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it. icon_smile.gif

    1. @Jelon Thanks, the article has been published almost a year, I will update it. icon_biggrin.gif

添加新评论

icon_question.gificon_razz.gificon_sad.gificon_evil.gificon_exclaim.gificon_smile.gificon_redface.gificon_biggrin.gificon_surprised.gificon_eek.gificon_confused.gificon_cool.gificon_lol.gificon_mad.gificon_twisted.gificon_rolleyes.gificon_wink.gificon_idea.gificon_arrow.gificon_neutral.gificon_cry.gificon_mrgreen.gif