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)
　　}

 

转载于:https://www.cnblogs.com/brainworld/p/9132193.html