欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?@scroll監(jiān)聽滾動條事件方式

 更新時間：2023年11月14日 11:18:13   作者：chen_sheng_le  
這篇文章主要介紹了vue?@scroll監(jiān)聽滾動條事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue@scroll監(jiān)聽滾動條事件

為啥要使用@scroll監(jiān)聽滾動條事件沒用在vue.js開發(fā)前我們監(jiān)聽滾動條事件都是在window掛監(jiān)聽事件

例如：

window.onscroll=function

不是說vue.js不能這樣寫，只是這樣寫不好這些必須在這個頁面銷毀時清除這個事件不然的話就會在全局監(jiān)聽，用原生window監(jiān)聽可能是大家最熟悉的方法。

可vue.js給我提供了@scroll這個方法用來處理滾動條監(jiān)聽它不香嗎???

好了不多BB直接將上干貨

使用@scroll的幾個必要條件@scroll必須綁定在你要監(jiān)聽的盒子上且盒子必須寫高度，請注意了是必須寫高度若是想監(jiān)聽移動端滿屏建議高度直接寫100Vh讓后在css樣式上必須加上overflow:scroll;

這個是重點再說一遍是必須加上overflow:scroll;

大家可以看到我監(jiān)聽的是box1這個外出大盒子

述

下面是box1這個盒子的樣式前面也說到了overflow:scroll;

和高度是必須加的必然沒效果這里小編踩過很多坑特別是樣式的問題不然我也不會這么啰嗦

說完了html和css的問題 接下來就說@scroll這么怎么用吧 其實和@click以用 都是在后面接上一個方法

例如：

@scroll="handleScroll(event ) "

看到這里大家是不是感覺很熟悉了你要是問我為啥你就回去好好看看js吧看到了event 要是還不會 那就…

想不起來也沒關(guān)系 小編幫你回憶 在你綁定的函數(shù)必須傳一個實參

event不然你拿不到事件對象我這里綁定的函數(shù)是handleScroll函數(shù)里面定義的形參是e(接收傳過來的實參event)

既然拿到事件對象e了 你是不是就會了勒

我這里就寫一個小的案例吧 也是用的最多的監(jiān)聽滾動條是否到底

這是綁定函數(shù)代碼片段可以看到監(jiān)聽是否到底就是一個if的事e.srcElement.scrollTop + e.srcElement.offsetHeight >= e.srcElement.scrollHeight

解釋一下：

這個if 頂部距離+當(dāng)前滾動的高度>=滾動條的總高度這里一定不能寫 = 臨界值是很難觸發(fā)的一定不要給自己挖坑

沒辦法 條件有限 只能截代碼片段

但是我想這些片段應(yīng)該也足夠你入門@scroll事件了

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論