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