scroll滚动动画(js/ts)
//(蓝色this部分为dom) scrollToLeft(option?: { duration?: number, direction?: number }) { let direction = option.direction || 1 let animDuration = option.duration || 300 let listWidth = this.dateList.scrollWidth,//list总的scroll宽度 scrollItemWidth = listWidth / this.dateList.length;//每一个item宽度 let left = this.scrollList.scrollLeft,//滚动条scrollLeft offsetLeft = left + scrollItemWidth * direction; let targetLeft; if (offsetLeft < 0) {//超过最左边边界 targetLeft = 0 } else if (offsetLeft > (listWidth - this.dateList.offsetWidth)) {//超过最右边边界 targetLeft = listWidth - this.dateList.offsetWidth } else { targetLeft = offsetLeft } let scrollIntercal = setInterval(() => { if (option.direction < 0) { if (this.scrollList.scrollLeft > targetLeft) { this.scrollList.scrollLeft += (scrollItemWidth / (animDuration / 15)) * direction } else { clearInterval(scrollIntercal) } } else { if (this.scrollList.scrollLeft < targetLeft) { this.scrollList.scrollLeft += (scrollItemWidth / (animDuration / 15)) * direction } else { clearInterval(scrollIntercal) } } }, 15) }