新闻单行间歇滚动效果

现在很多网页在首页都会放一个头条新闻的地方，有一两条新闻间歇滚动。
网上方法有很多，这里记录两种自己用的方法。用到的有setTimeout, requestAnimationFrame。

方法一：

通过srollTop来实现：
e.g.

<style type="text/css">
.box{
    width: 100%;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}
</style>
<template>
    <div class="box">
        <ul>
            <li>春语精椿1</li>
            <li>春语精椿2</li>
            <li>春语精椿3</li>
        </ul>
    </div>
</template>
<script>
    let box = document.querySelector('.box');
    let $ul = box.children[0];
    let liH = $ul.children[0].offsetHeight;
    $ul.innerHTML += $ul.innerHTML;

    function roll() {
        box.scrollTop == parseInt(box.scrollHeight / 2) ? box.scrollTop = 0 : box.scrollTop++;
        setTimeout(roll, box.scrollTop % liH ? 10 : 1500);
    };
    roll();
</script>

方法二：
通过定时器改变定位，用定时器可能会造成丢帧卡顿，用requestAnimationFrame会好些。
e.g.

<style>
.news {
    width: 200px;
    height: 40px;
    overflow: hidden;
    border: 1px solid #CCC;
    margin: 50px auto;
    position: relative;
}
.news ul {
    position: absolute;
    left: 0;
    top: 0;
}
.news li {
    list-style: none;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    overflow: hidden;
}
</style>
<template>
    <div class="news">
        <ul>
            <li>1新闻滚动标题哈哈哈哈</li>
            <li>2新闻滚动标题哈哈哈哈</li>
            <li>3新闻滚动标题哈哈哈哈</li>
        </ul>
    </div>
</template>
<script>
function newsRoll() {
    var timer1 = 0;
    var timer2 = 0;
    var num = 0;

    var $news = document.querySelector('.news');
    var $ul = $news.querySelector('ul');
    var liH = $ul.children[0].offsetHeight;
    var ulH = liH * $ul.children.length;
    $ul.innerHTML += $ul.innerHTML;

    function animate() {
        num = Math.abs(num) < ulH ? num - 1 : 0
        $ul.style.top = num + 'px';
        if (num == 0 || num % liH != 0) {
            timer1 = requestAnimationFrame(animate);
        } else {
            cancelAnimationFrame(timer1);
        }
    }

    timer2 = setInterval(animate, 2000);

    // 由于大的循环用的定时器，当网页不可见时，还会继续执行，会造成任务堆积，
    // 因此在网页不可见的时候清除定时器。变为可见的时候再继续执行。
    document.addEventListener('visibilitychange', function() {
        var state = document.visibilityState;
        if (state == 'visible') {
            timer2 = setInterval(animate, 2000);
        } else {
            clearInterval(timer2);
        }
    });
}
newsRoll();
</script>