javascript - 一个JS问题

问题描述

问 题

一个列表的滚动,一共40个li,前后20个完全一样,后20个是为了无缝衔接(实际只需要10个~ 我是直接cloneNode,这个不重要~),每个高70px,3s滚动一次(demo里是1s一次),滚完20个归位(margin-top:0),但这个归位是不要动画的.

现在的情况是到19个时,直接归位了,少了一步动作.
昨天我问了相似的问题,并得到了解答.但是我今天用同样的方法却不行,何解?这是昨天的问题

---

写的有点乱. 大家可以看这里

解决方案

补充：如果是要动画过度流畅的话不建议使用setTimeout，因为各浏览器的性能不同，延迟时间难以统一。
重点在于重置margin-top的时候没有transition的效果，即取消浏览器对transition的缓存。

scroll:function(){
  
    if (this._mt == -1400 ){
        this._mt =0;
        this.container.style.cssText = "";
        // 黑科技，通过获取container的位置属性来清除对样式的缓存。
        this.container.offsetHeight;
    }

    this._mt += -70;
    var str = "margin-top:"+this._mt +"px;" + "transition-property:margin-top;transition-duration:1s;transition-timing-function:linear";
    this.container.style.cssText = str;

}

---

你在scroll里先把this._mt自减了70，所以起点不是0而是－70，在－1400的时候重置，当然只有19个。
重置条件改成this._mt == -1470就有20个了。

这篇关于javascript - 一个JS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！