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

 

posted @ 2018-06-04 10:46  善未易明  阅读(514)  评论(0编辑  收藏  举报