注:作者已于2017/11/22确认并修复了此bug,请从https://github.com/sonic0002/ScrollerJS中获取最新版本。
这个问题发生在最新版本的scrollerJs中,以时钟方式显示。插件实例配置如下:
width:200, amount:40, interval:600, separatorType:Scroller.SEPARATOR.TIME, separator:":"
以变化最为频繁的秒数为例,正常情况下,应该是每次向上更新显示一个数字。但在每天0点之后,其显示效果就变成下图这样了(注意看最后一位):
通过阅读源码+debug查明,问题根源在ScrollerImpl.prototype.refresh方法。问题出现过程大致还原如下:
在23:59:59即将切换至00:00:00时,ScrollerImpl.prototype.scrollTo中的
this.props._mode=(this.beginNum>this.endNum)?Scroller.MODE.COUNTDOWN:Scroller.MODE.COUNTUP;
语句认为this.beginNum > this.endNum,即'235959' > '000000'。这时会将this.props._mode设置为Scroller.MODE.COUNTDOWN,即1(之前是默认值Scroller.MODE.COUNTUP,即0),随后调用this.refresh()。
ScrollerImpl.prototype.refresh中:
if(that.props._mode){ that.scrollPanelArray[i].setMode(that.props._mode); }
that.props._mode为1时会执行setMode方法。但在之后的秒数更新中,scrollTo方法会将this.props._mode变回Scroller.MODE.COUNTUP,但因为其值为0,故后续的setMode方法不会被执行,因此滚动方向就被永久改变为Scroller.MODE.COUNTDOWN了。
解决方法:
获取最新版本,或者将
ScrollerImpl.prototype.refresh中的if判断条件改为that.props._mode !== undefined即可。