以下为通过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和根元素的区别

给个赞好不好,嘤嘤嘤