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

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

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

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

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

例如：

window.onscroll=function

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

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

好了不多BB直接將上干貨

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

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

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

述

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

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

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

例如：

@scroll="handleScroll(event ) "

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

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

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

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

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

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

解釋一下：

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

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

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

總結(jié)

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

相關(guān)文章

最新評(píng)論