一、JS頁面滾動到指定位置時觸發事件
在我們的應用開發中，經常會遇到需要在頁面滾動到指定位置時觸發某個事件的需求。比如當頁面滾動到某個區域時，自動載入更多數據或者實現背景圖隨著頁面滾動而滑動的效果。JS頁面滾動到指定位置時觸發事件是如何實現的呢？下面是一個簡單的實現代碼：
function scrollEvent(){
let element = document.getElementById("target");
let viewHeight = window.innerHeight;
let elementTop = element.getBoundingClientRect().top;
if(elementTop - viewHeight < 0){
//達到目標區域
console.log("Scroll event triggered!");
}
}
window.addEventListener("scroll", scrollEvent);
上面的代碼先通過getElementById方法拿到目標DOM節點，計算當前可見區域的高度和目標節點距離可見區域頂部的距離。在監聽到scroll事件時，如果目標節點頂部距離可見區域頂部的距離小於可見區域的高度，就說明滾動到了目標區域，觸發相應事件即可。這是基本的原理，開發中可以進一步優化和封裝。
二、Vue頁面滾動到指定位置
在Vue框架下實現頁面滾動到指定位置也是比較容易的。Vue提供了內置的指令v-scroll-to來實現元素平滑滾動到指定位置。以下是示例代碼：
原創文章，作者：GOVCP，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/316976.html
微信掃一掃 
支付寶掃一掃 