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

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

首先分享下 代码:

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这函数

【推广】 免费学中医,健康全家人
原文地址:https://www.cnblogs.com/laneyfu/p/7479132.html