2016年5月

小问题,简单记一下

今天用 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 来做喽~

是的,我又用上 sass 了,新公司在用,所以就又写 sass 了。

然后今天遇到的小问题,随手记一下

当我们用 sass 写如下代码的时候

.class{
    $padding: 5px;
    width: calc(100% - $paddding * 2);
}

嗯嗯,看上去好像很正常。。。

错!! 编译完了之后,你会发现这段代码是这样的

.class{
    width: calc(100% - $padding * 2);
}

然后浏览器就无情的忽略掉这一行谜一样的样式了

这尼玛是什么呀?! 摔!

好吧,看样子 sass 在编译的时候,把括号里面的变量当做字符串处理了。 所以我们该怎么办呢?

哈哈哈,对!还记得 sass 怎么在字符串里拼接变量么? 就是它!

.class{
    $padding: 5px;
    width: calc(100% - #{$paddding * 2});
}

OK,解决!