以下为通过vue-cli脚手架搭建的项目中页面组件中的根元素出现不能监听scroll事件的处理方式和原理
en....我自认为我是比较叨的
过程:
通过脚手架生成的页面如下:
html
出现的问题是: didScroll没有触发
先上原因: (其实看了原因应该就懂了)
说法1:
这里的@scroll事件监听的是content的滚动
content的高度是更加内容高度变化的
也就是说,就算你设置content的height:100%,这个100%就是百分百内容高度
但是,这里为什么还可以滚动呢?
内容高度超出屏幕,滚动是的HTML中的body
说法2:
页面本来就只有body,vue-cli只是在body上放东西而已.
超出了body,body可以滚动是很正常的
但是页面监听的一般不是body,是页面组件的根元素
所以根元素不写死高度,扩充了body,body就飘了.
要达到组件内监听组件根元素的scroll事件的处理方法:
解法1:设置组件的根元素content为一个写死的高度
height:10rem
解法2:设置组件的根元素为content的position为absolute,并填充屏幕
css
3:其他类似方法,要么限死,要么框起来
总结:
其他本来功能就是正常的,只是混淆了body和根元素的区别
给个赞好不好,嘤嘤嘤
