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)
      }
  • 相关阅读:
    String、StringBuffer与StringBuilder之间区别
    关于 hashCode() 你需要了解的 3 件事
    Java基础之 运算符
    Java基础之基础语法
    Java基础之Java 修饰符
    自动化-python介绍与基础
    vue访问本地后台
    vue请求报错Uncaught (in promise)
    使用vue-resource,get、post、jsonp都报未定义的错误。
    【蓝桥杯】历届试题 打印十字图
  • 原文地址:https://www.cnblogs.com/brainworld/p/9132193.html
Copyright © 2011-2022 走看看