Native JS encapsulates the vertical scrolling animation tool function based on window.scrollTo()-JS Tutorial-php.cn

Table of Contents

Summary ：

Usage method

Home

Web Front-end

JS Tutorial

Native JS encapsulates the vertical scrolling animation tool function based on window.scrollTo()

Jul 07, 2018 pm 05:43 PM

javascript

This article mainly introduces the vertical scrolling animation tool function encapsulated in native JS based on window.scrollTo(). It has a certain reference value. Now I share it with you. Friends in need can refer to it

Summary ：

Native JS encapsulates the vertical scrolling animation tool function based on window.scrollTo(), which can be used for operations such as anchor positioning and returning to the top.

Reason for encapsulation:
In the vue project, when encountering the need to achieve a vertical scrolling effect, there are two initial methods that come to mind:
1: Use the window.scrollTo() method, but this The method has no animation effect and needs to be encapsulated manually.
2: Using JQuery’s animation function has obvious disadvantages: JQuery needs to be introduced.
Obviously, choosing the first option is much better.

The following is the method scroll() that encapsulates window.scrollTo(). The file name is 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(() =&gt; {
    // 一次调用滑动帧数，每次调用会不一样
    const dist = Math.ceil(needScrollTop / 10)
    _currentY += dist
    window.scrollTo(_currentY, currentY)
    // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
    if (needScrollTop &gt; 10 || needScrollTop &lt; -10) {
      scroll(_currentY, targetY)
    } else {
      window.scrollTo(_currentY, targetY)
    }
  }, 1)
}
// 暴露此方法
export default scroll

Copy after login

Usage method

For example, in vue, you can use it like this:
import scroll form '@/common/util/scroll.js'
Then scroll() is called in the function that responds to the trigger event, and two parameters need to be passed in, for example:

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

Copy after login

Yes Feel free to point out errors or unclear areas or areas that can be improved. O(∩_∩)O~~

The above is the entire content of this article. I hope it will be helpful to everyone’s study. More related content Please pay attention to PHP Chinese website!

Related recommendations:

JS implements merge sorting

vue implements digital scrolling increasing effect

Jquery adds loading transition mask

The above is the detailed content of Native JS encapsulates the vertical scrolling animation tool function based on window.scrollTo(). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn