原生JS基于window.scrollTo()封装垂直滚动动画工具函数

Caizhenhao 发布于2019-08-22 18:31 / 3531人阅读

摘要：概要原生基于封装垂直滚动动画工具函数，可应用与锚点定位回到顶部等操作。封装原因在项目中，遇到需要实现垂直滚动效果的需求，初步想到的方法有两个使用方法，但是这个方法是没有动画效果的，需要手动封装一下。使用的动画函数，缺点比较明显需要引入。

概要：

原生JS基于window.scrollTo()封装垂直滚动动画工具函数，可应用与锚点定位、回到顶部等操作。

封装原因：
在vue项目中，遇到需要实现垂直滚动效果的需求，初步想到的方法有两个：
1：使用window.scrollTo()方法，但是这个方法是没有动画效果的，需要手动封装一下。
2：使用JQuery的动画函数，缺点比较明显：需要引入JQuery。
显然，选择第一种好很多。

以下为封装window.scrollTo()的方法scroll()，文件名为scroll.js

// Created by xiaoqiang on 30/05/2018.
/**
 * @param {numeber} currentY 需要移动的dom当前位置离网页顶端的距离
 * @param {number} targetY 需要移动的dom当前位置离要移到的位置的距离
 */
function scroll (currentY, targetY) {
  // 计算需要移动的距离
  let needScrollTop = targetY - currentY
  let _currentY = currentY
  setTimeout(() => {
    // 一次调用滑动帧数，每次调用会不一样
    const dist = Math.ceil(needScrollTop / 10)
    _currentY += dist
    window.scrollTo(_currentY, currentY)
    // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
    if (needScrollTop > 10 || needScrollTop < -10) {
      scroll(_currentY, targetY)
    } else {
      window.scrollTo(_currentY, targetY)
    }
  }, 1)
}
// 暴露此方法
export default scroll

使用方法

比如在vue中，可以这样用：
import scroll form "@/common/util/scroll.js"
随后在响应触发事件的函数中调用scroll()，需要传入两个参数，比如：

      methods: {
        test () {
          const scrollHeight = document.getElementsByClassName("scroll-element")[0].offsetTop
          const currentY = document.documentElement.scrollTop || document.body.scrollTop
          scroll(currentY, scrollHeight)
        }
      }

本人博客地址：https://ecmascripter.blog.csd...

云服务器 GPU云服务器 js原生动画工具函数封装 js原生动画详解原生js封装ajax

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95951.html

完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

layman 2019-08-29 17:08 评论0 收藏0
完美实现一个“回到顶部”

摘要：在浏览器中，页面默认滚动是在标签上，移动端大多数在标签上，在我们想要实现平滑回到顶部，只需在这两个标签上都加上准确的说，写在容器元素上，可以让容器非鼠标手势触发的滚动变得平滑，而不局限于，标签。前言在实际应用中，经常用到滚动到页面顶部或某个位置，一般简单用锚点处理或用js将document.body.scrollTop设置为0，结果是页面一闪而过滚到指定位置，不是特别友好。我们想要...

littlelightss 2019-08-23 12:36 评论0 收藏0
监听页面滚动相关知识点

摘要：监听事件代码页面滚动时，需要做的事情知识点使用和来处理页面上的事件，区别仅仅在于不同事件模型上，处理的顺序不一样。此处的参数确定侦听器是运行于捕获阶段目标阶段还是冒泡阶段。如果为，则侦听器只在目标或冒泡阶段处理事件。事件侦听器的优先级。监听事件代码 function pageChange () { // ... 页面滚动时，需要做的事情 } window.addEventL...

Worktile 2019-08-23 12:29 评论0 收藏0
MUI使用总结

摘要：预加载自定义事件第三方扩展插件涉及的，除了，其它所有手机浏览器及浏览器均无法使用，目前主要包括语音输入事件相关注意浏览器没有事件事件相关的，手机端浏览器均可使用端模拟手机浏览器也可以正常使用。最近项目中需要使用MUI做一个视频播放的小功能。我就花时间研究了一下MUI。 MUI是一个使用JavaScript开发Android和IOS应用的前端框架。这篇文章将以知识树的形式对MUI的使用...

elliott_hu 2019-08-23 14:48 评论0 收藏0
(个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法二

摘要：个人笔记在给在线简历添加特效过程中遇到的问题及解决方法二预览点击菜单滚动动画首页目标位置当作终点坐标当前滚动到的距离当做起点是步数分步是每次重复都加的变量既要清除又要毫秒除以帧就是每走一步的时间库缓动动画缓动函数速查表库搜索引入一个网站 (个人笔记)在给在线简历添加js特效过程中遇到的问题及解决方法二 github预览点击菜单滚动动画首页 let top = element.of...

CarlBenjamin 2019-08-22 17:32 评论0 收藏0