以下為通過vue-cli腳手架搭建的項(xiàng)目中頁面組件中的根元素出現(xiàn)不能監(jiān)聽scroll事件的處理方式和原理
en....我自認(rèn)為我是比較叨的
過程:
通過腳手架生成的頁面如下:
html
出現(xiàn)的問題是: ? didScroll沒有觸發(fā)
先上原因:? ? (其實(shí)看了原因應(yīng)該就懂了)
說法1:
這里的@scroll事件監(jiān)聽的是content的滾動
content的高度是更加內(nèi)容高度變化的
也就是說,就算你設(shè)置content的height:100%,這個100%就是百分百內(nèi)容高度
但是,這里為什么還可以滾動呢?
內(nèi)容高度超出屏幕,滾動是的HTML中的body
說法2:
頁面本來就只有body,vue-cli只是在body上放東西而已.
超出了body,body可以滾動是很正常的
但是頁面監(jiān)聽的一般不是body,是頁面組件的根元素
所以根元素不寫死高度,擴(kuò)充了body,body就飄了.
要達(dá)到組件內(nèi)監(jiān)聽組件根元素的scroll事件的處理方法:
解法1:設(shè)置組件的根元素content為一個寫死的高度
? ? ? ? height:10rem
解法2:設(shè)置組件的根元素為content的position為absolute,并填充屏幕
css
3:其他類似方法,要么限死,要么框起來
總結(jié):
其他本來功能就是正常的,只是混淆了body和根元素的區(qū)別
給個贊好不好,嚶嚶嚶
