文字在在手机中滚动时闪烁

最近做一个 文字 横向 滚动的 例子 ，遇到了 几个坑 

首先分享下 代码：

var scrollTimer;

function scrollText(dom,marginWid) {
    var lis = dom.find('li');
    let htmlUl = dom.html();
    let leftW=0;
    lis.length>1 && dom.append(htmlUl);
    let allTextWid = lis.length * (lis[0].offsetWidth + marginWid);
    if(lis.length>1) {
        clearInterval(scrollTimer);
       lis.length && dom.width(lis.length * (lis[0].offsetWidth+marginWid)*2);
        scrollTimer = setInterval(function() {
            leftW-=3;

            if(Math.abs(leftW) >=allTextWid) {
                leftW=0;
            }
            dom.css({'left':leftW});
        },50);
        dom.removeClass('only-one');
    } else if(lis.length==0 || lis.length==1 ){
        dom.addClass('only-one');
    }
}

　　

因为页面中有好几处需要滚动，所以写了一个 统一的函数 ，dom代表滚动的 父节点 ，marginWid代表模块与模块间的间距（如 marget-left.或者marget-right），如果 没有取值为0

应用： scrollText($userRecord,0);

          scrollText($('#rewardOtherBox'),15);

但是 页面里有一个 抽奖的 功能，所以每次抽完奖，需要重新渲染页面，这样 如果没有 clearInterval的话 ，就有 多个重影的 滚动，因为之前的 scrollTimer没有被停止。

 

坑1 ： 重新渲染页面的时候 要 停止 scrollTimer ，

坑2:   多个滚动 每个 滚动的 scrollTimer 不能一样，不然会受影响

坑3:  滚动的时候在手机端出现闪动

添加如下 属性 ，闪动问题解决：

-webkit-transform: translate3d(0,0,0);
overflow: hidden;
backface-visibility: hidden;

所以 一定要注意 每次滚动重新渲染时 一定要记住 先 清除下 scrollTimer这函数