Native JS encapsule la fonction de l'outil d'animation à défilement vertical basée sur window.scrollTo()

Cet article présente principalement la fonction de l'outil d'animation à défilement vertical encapsulée dans du JS natif basé sur window.scrollTo(). Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. > Résumé :

Native JS encapsule la fonction de l'outil d'animation à défilement vertical basée sur window.scrollTo(), qui peut être utilisée pour des opérations telles que le positionnement de l'ancre et le retour au sommet.

Raison de l'encapsulation :

Dans le projet vue, lorsque vous rencontrez le besoin d'obtenir un effet de défilement vertical, deux méthodes initiales viennent à l'esprit :

1 : Utilisez window.scrollTo( ), mais cette méthode n'a aucun effet d'animation et doit être encapsulée manuellement.
2 : L'utilisation de la fonction d'animation de JQuery présente des inconvénients évidents : JQuery doit être introduit.
Évidemment, choisir la première option est bien meilleur.

Ce qui suit est la méthode scroll() qui encapsule window.scrollTo() Le nom du fichier est scroll.js

Méthode d'utilisation

// 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

Par exemple, dans. vue, vous pouvez faire ceci Utilisez :

import scroll form '@/common/util/scroll.js'

Puis appelez scroll() dans la fonction qui répond à l'événement déclencheur Vous devez transmettre deux paramètres. , tels que :

S'il y a des erreurs, des zones peu claires ou des zones qui peuvent être améliorées, veuillez les signaler O(∩_∩)O~~

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

Ce qui précède est l'intégralité du contenu de cet article.J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

JS implémente le tri par fusion

vue implémente l'effet croissant de défilement numérique

Jquery ajoute un masque de transition de chargement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!