原生JS基于window.scrollTo()封裝垂直滾動(dòng)動(dòng)畫(huà)工具函數(shù)

Caizhenhao 發(fā)布于2019-08-22 18:31 / 3685人閱讀

摘要：概要原生基于封裝垂直滾動(dòng)動(dòng)畫(huà)工具函數(shù)，可應(yīng)用與錨點(diǎn)定位回到頂部等操作。封裝原因在項(xiàng)目中，遇到需要實(shí)現(xiàn)垂直滾動(dòng)效果的需求，初步想到的方法有兩個(gè)使用方法，但是這個(gè)方法是沒(méi)有動(dòng)畫(huà)效果的，需要手動(dòng)封裝一下。使用的動(dòng)畫(huà)函數(shù)，缺點(diǎn)比較明顯需要引入。

概要：

原生JS基于window.scrollTo()封裝垂直滾動(dòng)動(dòng)畫(huà)工具函數(shù)，可應(yīng)用與錨點(diǎn)定位、回到頂部等操作。

封裝原因：
在vue項(xiàng)目中，遇到需要實(shí)現(xiàn)垂直滾動(dòng)效果的需求，初步想到的方法有兩個(gè)：
1：使用window.scrollTo()方法，但是這個(gè)方法是沒(méi)有動(dòng)畫(huà)效果的，需要手動(dòng)封裝一下。
2：使用JQuery的動(dòng)畫(huà)函數(shù)，缺點(diǎn)比較明顯：需要引入JQuery。
顯然，選擇第一種好很多。

以下為封裝window.scrollTo()的方法scroll()，文件名為scroll.js

// Created by xiaoqiang on 30/05/2018.
/**
 * @param {numeber} currentY 需要移動(dòng)的dom當(dāng)前位置離網(wǎng)頁(yè)頂端的距離
 * @param {number} targetY 需要移動(dòng)的dom當(dāng)前位置離要移到的位置的距離
 */
function scroll (currentY, targetY) {
  // 計(jì)算需要移動(dòng)的距離
  let needScrollTop = targetY - currentY
  let _currentY = currentY
  setTimeout(() => {
    // 一次調(diào)用滑動(dòng)幀數(shù)，每次調(diào)用會(huì)不一樣
    const dist = Math.ceil(needScrollTop / 10)
    _currentY += dist
    window.scrollTo(_currentY, currentY)
    // 如果移動(dòng)幅度小于十個(gè)像素，直接移動(dòng)，否則遞歸調(diào)用，實(shí)現(xiàn)動(dòng)畫(huà)效果
    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"
隨后在響應(yīng)觸發(fā)事件的函數(shù)中調(diào)用scroll()，需要傳入兩個(gè)參數(shù)，比如：

      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云服務(wù)器云服務(wù)器 js原生動(dòng)畫(huà) 工具函數(shù)封裝 js原生動(dòng)畫(huà)詳解原生js封裝ajax

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95951.html

相關(guān)文章

完美實(shí)現(xiàn)一個(gè)“回到頂部”

摘要：在瀏覽器中，頁(yè)面默認(rèn)滾動(dòng)是在標(biāo)簽上，移動(dòng)端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個(gè)標(biāo)簽上都加上準(zhǔn)確的說(shuō)，寫(xiě)在容器元素上，可以讓容器非鼠標(biāo)手勢(shì)觸發(fā)的滾動(dòng)變得平滑，而不局限于，標(biāo)簽。前言在實(shí)際應(yīng)用中，經(jīng)常用到滾動(dòng)到頁(yè)面頂部或某個(gè)位置，一般簡(jiǎn)單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁(yè)面一閃而過(guò)滾到指定位置，不是特別友好。我們想要...

layman 2019-08-29 17:08 評(píng)論0 收藏0
完美實(shí)現(xiàn)一個(gè)“回到頂部”

摘要：在瀏覽器中，頁(yè)面默認(rèn)滾動(dòng)是在標(biāo)簽上，移動(dòng)端大多數(shù)在標(biāo)簽上，在我們想要實(shí)現(xiàn)平滑回到頂部，只需在這兩個(gè)標(biāo)簽上都加上準(zhǔn)確的說(shuō)，寫(xiě)在容器元素上，可以讓容器非鼠標(biāo)手勢(shì)觸發(fā)的滾動(dòng)變得平滑，而不局限于，標(biāo)簽。前言在實(shí)際應(yīng)用中，經(jīng)常用到滾動(dòng)到頁(yè)面頂部或某個(gè)位置，一般簡(jiǎn)單用錨點(diǎn)處理或用js將document.body.scrollTop設(shè)置為0，結(jié)果是頁(yè)面一閃而過(guò)滾到指定位置，不是特別友好。我們想要...

littlelightss 2019-08-23 12:36 評(píng)論0 收藏0
監(jiān)聽(tīng)頁(yè)面滾動(dòng)相關(guān)知識(shí)點(diǎn)

摘要：監(jiān)聽(tīng)事件代碼頁(yè)面滾動(dòng)時(shí)，需要做的事情知識(shí)點(diǎn)使用和來(lái)處理頁(yè)面上的事件，區(qū)別僅僅在于不同事件模型上，處理的順序不一樣。此處的參數(shù)確定偵聽(tīng)器是運(yùn)行于捕獲階段目標(biāo)階段還是冒泡階段。如果為，則偵聽(tīng)器只在目標(biāo)或冒泡階段處理事件。事件偵聽(tīng)器的優(yōu)先級(jí)。監(jiān)聽(tīng)事件代碼 function pageChange () { // ... 頁(yè)面滾動(dòng)時(shí)，需要做的事情 } window.addEventL...

Worktile 2019-08-23 12:29 評(píng)論0 收藏0
MUI使用總結(jié)

摘要：預(yù)加載自定義事件第三方擴(kuò)展插件涉及的，除了，其它所有手機(jī)瀏覽器及瀏覽器均無(wú)法使用，目前主要包括語(yǔ)音輸入事件相關(guān)注意瀏覽器沒(méi)有事件事件相關(guān)的，手機(jī)端瀏覽器均可使用端模擬手機(jī)瀏覽器也可以正常使用。最近項(xiàng)目中需要使用MUI做一個(gè)視頻播放的小功能。我就花時(shí)間研究了一下MUI。 MUI是一個(gè)使用JavaScript開(kāi)發(fā)Android和IOS應(yīng)用的前端框架。這篇文章將以知識(shí)樹(shù)的形式對(duì)MUI的使用...

elliott_hu 2019-08-23 14:48 評(píng)論0 收藏0
(個(gè)人筆記)在給在線簡(jiǎn)歷添加js特效過(guò)程中遇到的問(wèn)題及解決方法二

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

CarlBenjamin 2019-08-22 17:32 評(píng)論0 收藏0