(蓝色部分为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)
}