zoukankan      html  css  js  c++  java
  • 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)
      }
  • 相关阅读:
    ZeroMQ自查手册
    如何回答——请简述MySQL索引类型
    101. 对称二叉树
    66. 加一
    104. 二叉树的最大深度
    724.寻找数组的中心索引
    33. 搜索旋转排序数组
    快速排序
    Vue
    HTML
  • 原文地址:https://www.cnblogs.com/brainworld/p/9132193.html
Copyright © 2011-2022 走看看