前幾天做專案的時候，需要實現乙個動態錨點的效果
如果是傳統專案，這個效果就非常簡單。但是放到 vue 中，就有兩大難題：
1. 在沒有 jquery 的 animate() 方法的情況下，如何實現平滑滾動？
2. 如何監聽頁面滾動事件？
在瀏覽了大量文章、進行多次嘗試之後，終於解決了這些問題
期間主要涉及到了 settimeout 的遞迴用法，和 vue 生命週期中的 mounted
一、錨點實現
在實現平滑滾動之前，得先確保基本的錨點功能
如果沒有其他要求，直接用 是最簡單粗暴的辦法
但是為了滿足後續的要求，必須另外想辦法
首先在父元件（表單）中新增 class="d_jump" 作為鉤子
然後在子元件中新增乙個 jump 方法
jump (index) ,需要注意的是，各瀏覽器下獲取 scrolltop 有所差異
chrome： document.body.scrolltop
firefox： document.documentelement.scrolltop
二、平滑滾動
僅僅是錨點是不夠的，這樣的跳轉十分突兀
為了更好的使用者體驗 ，需要將滾動的過程展現出來
如果有 jquery 實現平滑滾動就非常簡單：
$('html body').animate(, 500);將總距離分成很多小段，然後每隔一段時間跳一段
只要每段的時間足夠短，頻次足夠多，在視覺上就是正常的平滑滾動了
// 平滑滾動，時長500ms，每10ms一跳，共50跳
// 獲取當前滾動條與窗體頂部的距離
let distance = document.documentelement.scrolltop || document.body.scrolltop
// 計算每一小段的距離
let step = total / 50
(function smoothdown () else
})()
jump (index) else
function smoothdown () else
}function smoothup () else } }
其實這個效果並不難，只需要監聽頁面滾動事件，然後根據滾動條的距離修改錨點狀態就可以了
但是在 vue 中，應該在什麼地方監聽滾動事件呢？
mounted: function () )
},methods: else if (scrolled < 1063 && scrolled >= 586) else }}
mounted 是 vue 生命週期中的乙個狀態，在這個狀態下，$el （vue 例項的根元素）已經建立完畢，但還沒有載入資料
從結果上看，也可以在 created 狀態下監聽 scroll 事件
如果對 mounted 和 created 還不夠了解，可以參考官方文件·生命週期圖示
後記
上面只能算是乙個應急之法，而且這種操作 dom 的方法，並不符合 vue 的設計理念
待我研究出更合理更高效的辦法之後，再發出來分享~
vue監聽滾動事件
vue中監聽滾動事件，然後對其進行事件處理，一般有 1.滾動到頂部吸附 2.根據滾動的位置啟用對應的tab鍵 錨鏈結tab鍵 這兩種方式的處理都是可通過監聽scroll來實現 mounted 處理方法 1.滾動到頂部吸附 html元素 這個是要滾動到頂部吸附的元素 methods方法 handles...
vue專案中實現監聽滾動條滾動事件並滾動到固定位置
研究了兩天，終於實現了自己想要的功能，先說這個功能就是監聽滾動條，讓他到達某個位置後停止，比如吸頂功能。這個功能我在網上查了兩天，基本沒有我想要的效果，全是吸頂的，無奈做了更多的功課。還有一種方法可以實現，就是position sticky。話不多說直接看效果圖 一 效果圖 就是標記這一塊，拉到下面...
vue脫坑合集（七） 監聽滾動事件 實現動態錨點
前幾天做專案的時候，需要實現乙個動態錨點的效果 如果是傳統專案，這個效果就非常簡單。但是放到 vue 中，就有兩大難題 1.在沒有 jquery 的 animate 方法的情況下，如何實現平滑滾動？2.如何監聽頁面滾動事件？在瀏覽了大量文章 進行多次嘗試之後，終於解決了這些問題 期間主要涉及到了 s...