Native JS kapselt die Funktion des vertikalen Scroll-Animationstools basierend auf window.scrollTo()

In diesem Artikel wird hauptsächlich die Funktion des vertikalen Scroll-Animationstools vorgestellt, die auf window.scrollTo() basiert. Jetzt kann ich sie mit Ihnen teilen

Zusammenfassung:

Native JS kapselt die vertikale Scroll-Animationstoolfunktion basierend auf window.scrollTo(), die für Vorgänge wie Ankerpositionierung und Rückkehr nach oben verwendet werden kann.

Grund für die Kapselung:
Wenn Sie im Vue-Projekt auf die Notwendigkeit stoßen, einen vertikalen Bildlaufeffekt zu erzielen, fallen mir zunächst zwei Methoden ein:
1: Verwenden Sie window.scrollTo( ) Methode, aber diese Methode hat keinen Animationseffekt und muss manuell gekapselt werden.
2: Die Verwendung der Animationsfunktion von JQuery hat offensichtliche Nachteile: JQuery muss eingeführt werden.
Natürlich ist es viel besser, die erste Option zu wählen.

Das Folgende ist die Methode scroll(), die window.scrollTo() kapselt. Der Dateiname lautet 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

Verwendungsmethode

In Vue beispielsweise Sie können es wie folgt verwenden:
import scroll form '@/common/util/scroll.js'
Dann rufen Sie scroll() in der Funktion auf, die auf das Triggerereignis reagiert. Sie müssen zwei Parameter übergeben: wie zum Beispiel:

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

Ja Fühlen Sie sich frei, auf Fehler oder unklare Bereiche oder Bereiche hinzuweisen, die verbessert werden können. O(∩_∩)O~~

Das Obige ist das Ganze Der Inhalt dieses Artikels wird für alle hilfreich sein. Weitere verwandte Inhalte. Bitte beachten Sie die chinesische PHP-Website!

Verwandte Empfehlungen:

JS implementiert Merge-Sortierung

vue implementiert den Effekt der Erhöhung des digitalen Scrollens

Jquery fügt Ladeübergangsmaske hinzu

Das obige ist der detaillierte Inhalt vonNative JS kapselt die Funktion des vertikalen Scroll-Animationstools basierend auf window.scrollTo(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!