原生JS基于window.scrollTo()封裝垂直滾動動畫工具函數

Caizhenhao 發布于2019-08-22 18:31 / 3580人閱讀

摘要：概要原生基于封裝垂直滾動動畫工具函數，可應用與錨點定位回到頂部等操作。封裝原因在項目中，遇到需要實現垂直滾動效果的需求，初步想到的方法有兩個使用方法，但是這個方法是沒有動畫效果的，需要手動封裝一下。使用的動畫函數，缺點比較明顯需要引入。

概要：

原生JS基于window.scrollTo()封裝垂直滾動動畫工具函數，可應用與錨點定位、回到頂部等操作。

封裝原因：
在vue項目中，遇到需要實現垂直滾動效果的需求，初步想到的方法有兩個：
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中，可以這樣用：
import scroll form "@/common/util/scroll.js"
隨后在響應觸發事件的函數中調用scroll()，需要傳入兩個參數，比如：

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

本人博客地址：https://ecmascripter.blog.csd...

GPU云服務器云服務器 js原生動畫工具函數封裝 js原生動畫詳解原生js封裝ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95951.html

完美實現一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評論0 收藏0
完美實現一個“回到頂部”

摘要：在瀏覽器中，頁面默認滾動是在標簽上，移動端大多數在標簽上，在我們想要實現平滑回到頂部，只需在這兩個標簽上都加上準確的說，寫在容器元素上，可以讓容器非鼠標手勢觸發的滾動變得平滑，而不局限于，標簽。前言在實際應用中，經常用到滾動到頁面頂部或某個位置，一般簡單用錨點處理或用js將document.body.scrollTop設置為0，結果是頁面一閃而過滾到指定位置，不是特別友好。我們想要...

littlelightss 2019-08-23 12:36 評論0 收藏0
監聽頁面滾動相關知識點

摘要：監聽事件代碼頁面滾動時，需要做的事情知識點使用和來處理頁面上的事件，區別僅僅在于不同事件模型上，處理的順序不一樣。此處的參數確定偵聽器是運行于捕獲階段目標階段還是冒泡階段。如果為，則偵聽器只在目標或冒泡階段處理事件。事件偵聽器的優先級。監聽事件代碼 function pageChange () { // ... 頁面滾動時，需要做的事情 } window.addEventL...

Worktile 2019-08-23 12:29 評論0 收藏0
MUI使用總結

摘要：預加載自定義事件第三方擴展插件涉及的，除了，其它所有手機瀏覽器及瀏覽器均無法使用，目前主要包括語音輸入事件相關注意瀏覽器沒有事件事件相關的，手機端瀏覽器均可使用端模擬手機瀏覽器也可以正常使用。最近項目中需要使用MUI做一個視頻播放的小功能。我就花時間研究了一下MUI。 MUI是一個使用JavaScript開發Android和IOS應用的前端框架。這篇文章將以知識樹的形式對MUI的使用...

elliott_hu 2019-08-23 14:48 評論0 收藏0
(個人筆記)在給在線簡歷添加js特效過程中遇到的問題及解決方法二

摘要：個人筆記在給在線簡歷添加特效過程中遇到的問題及解決方法二預覽點擊菜單滾動動畫首頁目標位置當作終點坐標當前滾動到的距離當做起點是步數分步是每次重復都加的變量既要清除又要毫秒除以幀就是每走一步的時間庫緩動動畫緩動函數速查表庫搜索引入一個網站 (個人筆記)在給在線簡歷添加js特效過程中遇到的問題及解決方法二 github預覽點擊菜單滾動動畫首頁 let top = element.of...

CarlBenjamin 2019-08-22 17:32 評論0 收藏0