//(蓝色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)
  }

scroll滚动动画(js/ts)的更多相关文章

  1. JS 实现无缝滚动动画原理(初学者入)

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  2. wow.js+animate.css——有趣的页面滚动动画

    今天偶然间发现了一个使用特别简单的页面动画效果,还挺不错的,玩了一个上午,现在介绍一下这个滚动动画: 一.使用方法: 1.下载animate.css 2.下载wow.js 3.引用文件,像这样: &l ...

  3. js中scroll滚动相关

    js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关 属性/方法 解释 element.scrollHeight 返回元素的整体高度. element ...

  4. 使用IntersectionObserver制作滚动动画以及其他记录

    前言 最近在重做公司项目的主页,正好新来了个UI,整个都重新设计了一下,动画还挺多的.我之前没有怎么玩过这些,踩了挺多坑,最后找到了目前而言最合适的方法,现在做一个记录. 需要把原来的主页从项目中抽出 ...

  5. 推荐几款制作网页滚动动画的 JavaScript 库

    这里集合了几款很棒的制作网页滚动动画的 JavaScript 库和插件.它们中,有的可以帮助你在页面滚动的时候添加动感的元素动画,有的则是实现目前非常流行的全屏页面切换动画.相信借助这些插件,你也可以 ...

  6. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  7. 微信小程序滚动动画,点击事件及评分星星制作!

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

  8. 超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用)

    超详细Vue实现导航栏绑定内容锚点+滚动动画+vue-router(hash模式可用) 转载自:https://www.jianshu.com/p/2ad8c8b5bf75 亲测有效~ <tem ...

  9. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

随机推荐

  1. Topless eclipse导入myeclipse的web项目没法识别问题解决

    1.进入项目目录,找到.project文件,打开. 2.找到<natures>...</natures>代码段. 3.在第2步的代码段中加入如下标签内容并保存: <nat ...

  2. ubuntu 常用设置

    ●1 问题:使用virt-manager创建虚拟机时,Virtual network 'default':NAT(Inactive) 解决方法:1,查看网络状态sudo virsh net-list ...

  3. Paket介绍

    在国外.NET社区有一个很火的话题是Packet(https://fsprojects.github.io/Paket/index.html ),它本质上是Nuget 之外的另一种方式管理.NET项目 ...

  4. 监督学习--k近邻算法

    2017-07-20 15:18:25 k近邻(k-Nearest Neighbour, 简称kNN)学习是一种常用的监督学习方法,其工作机制非常简单,对某个给定的测试样本,基于某种距离度量找出训练集 ...

  5. C#通过Oracle.ManagedDataAccess无法访问Oralce

    问题描述:通过C#引用Oracle.ManagedDataAccess.dll访问Oracle,写了如下一段代码,在本机能正常访问,但是将编译后的exe放到服务器上面就无法访问了,一直提示登录失败.而 ...

  6. Apache配置文件httpd.conf细说

    1.httpd.conf文件位于apache安装目录/conf下2.Listen 88表示监听端口88 此处可以连续写多个端口监听如下: Listen 88 Listen 809 3.目录配置如下: ...

  7. [.NET开发] C# 如何更改Word语言设置

    一般在创建或者打开一个Word文档时,如果没有进行过特殊设置的话,系统默认的输入语言的是英语输入,但是为适应不同的办公环境,我们其实是需要对文字嵌入的语言进行切换的,因此,本文将介绍如何使用Spire ...

  8. Mysql错误: Lock wait timeout exceeded 解决办法

    一.临时解决办法: 执行mysql命令:show full processlist; 然后找出插入语句的系统id 执行mysql命令:kill id 或 首先,查看数据库的进程信息: show ful ...

  9. Java 访问控制关键字

    public, private, protected 在控制上有什么区别和不同请参考下面的说明. 请参考下图的说明. 和下面的一个说明: │ Class │ Package │ Subclass │ ...

  10. 转 解决linux下tomcat的shutdown命令杀不死进程

    tomcat在windows下可以直接关闭,但是貌似在Linux下有时候shutdown.sh 没有关闭tomcat进程; 现象:在Linux下shutdown.sh ,然后查看tomcat进程发现没 ...