ネイティブ JS は、window.scrollTo() に基づいて垂直スクロール アニメーション ツール関数をカプセル化します。

この記事では、window.scrollTo() に基づいてネイティブ JS でカプセル化された垂直スクロール アニメーション ツール関数を主に紹介します。必要な友達はそれを参照できるように共有します。 JS は window.scrollTo() に基づいて垂直スクロール アニメーション ツール関数をカプセル化し、アンカー ポイントの位置決めや先頭に戻るなどの操作に使用できます。

カプセル化の理由:

Vue プロジェクトで垂直スクロール効果を実現する必要がある場合、最初に 2 つの方法が思い浮かびます:

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では次のように使えます:

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

その後、トリガー イベントに応答する関数内でscroll() が呼び出されます。次のような 2 つのパラメーターを渡す必要があります。

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

エラーがある場合、または不明瞭な場合。改善できる点や改善点がございましたら、ご指摘ください。O(∩_∩)O~ ~

以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトにご注意ください。

関連する推奨事項:

JS はマージソートを実装します

デジタルスクロールの増加効果を実現するために

Jquery は読み込み遷移マスクを追加します

以上がネイティブ JS は、window.scrollTo() に基づいて垂直スクロール アニメーション ツール関数をカプセル化します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。