vue@scroll監(jiān)聽(tīng)滾動(dòng)條事件

為啥要使用@scroll監(jiān)聽(tīng)滾動(dòng)條事件沒(méi)用在vue.js開(kāi)發(fā)前我們監(jiān)聽(tīng)滾動(dòng)條事件都是在window掛監(jiān)聽(tīng)事件

例如：

window.onscroll=function

不是說(shuō)vue.js不能這樣寫(xiě)，只是這樣寫(xiě)不好這些必須在這個(gè)頁(yè)面銷(xiāo)毀時(shí)清除這個(gè)事件不然的話(huà)就會(huì)在全局監(jiān)聽(tīng)，用原生window監(jiān)聽(tīng)可能是大家最熟悉的方法。

可vue.js給我提供了@scroll這個(gè)方法用來(lái)處理滾動(dòng)條監(jiān)聽(tīng)它不香嗎???

好了不多BB直接將上干貨

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

這個(gè)是重點(diǎn)再說(shuō)一遍是必須加上overflow:scroll;

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

下面是box1這個(gè)盒子的樣式前面也說(shuō)到了overflow:scroll;

和高度是必須加的必然沒(méi)效果這里小編踩過(guò)很多坑特別是樣式的問(wèn)題不然我也不會(huì)這么啰嗦

說(shuō)完了html和css的問(wèn)題 接下來(lái)就說(shuō)@scroll這么怎么用吧 其實(shí)和@click以用 都是在后面接上一個(gè)方法

例如：

@scroll="handleScroll(event ) " 

看到這里大家是不是感覺(jué)很熟悉了你要是問(wèn)我為啥你就回去好好看看js吧看到了event 要是還不會(huì) 那就…

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

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

既然拿到事件對(duì)象e了 你是不是就會(huì)了勒

我這里就寫(xiě)一個(gè)小的案例吧 也是用的最多的監(jiān)聽(tīng)滾動(dòng)條是否到底

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

解釋一下：

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

沒(méi)辦法 條件有限 只能截代碼片段

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

總結(jié)

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

最新評(píng)論