ホームページ > ウェブフロントエンド > jsチュートリアル > ネイティブ JS は、window.scrollTo() に基づいて垂直スクロール アニメーション ツール関数をカプセル化します。

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

不言
リリース: 2018-07-07 17:43:46
オリジナル
4528 人が閲覧しました

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

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

1: window.scrollTo() メソッドを使用しますが、このメソッドには何もありません。アニメーション効果があるため、手動でカプセル化する必要があります。

2: JQuery のアニメーション機能の使用には明らかな欠点があります。JQuery を導入する必要があります。

明らかに、最初のオプションを選択する方がはるかに優れています。

以下はwindow.scrollTo()をカプセル化するメソッドscroll()です。ファイル名はscroll.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// 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 つのパラメーターを渡す必要があります。

1

2

3

4

5

6

7

      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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート