JAVA高级面试进阶训练营视频教程

admin

原文链接： 点我

页面中有这么一个需求，当页面滚动到一定高度之后，页面中的某些元素进行吸顶，固定到顶部位置，或者是滚动到一定程度进行更新数据的操作。
我相信不少网友查阅过类似的资料，网友给出的解决方案，很多都是在mounted中添加

1 window.addEventListener("scroll", this.handleScroll);

试了好多方法都不行，结果是我css样式写的有问题；

刚开始有用后来没用，之后排查发现是我给body设置了overflow：scroll（hidde）属性

采用这种形式来实现页面监听滚动的效果。
笔者最初也是采用了这种方式，刚开始可以实现想要的效果，后来，莫名其妙的就不可用了，经过一番探讨，使用监听组件滚动的形式来解决这个问题，至于通过window来实现监听为什么突然就不可用了，笔者暂时还不清楚什么原因造成的，有知道原因的欢迎留言。
想要实现监听组件滚动的效果，首先需要给需要监听的组件添加ref,以便可以通过this.$refs的形式拿到该元素的dom节点。
以简单示例来说明，有一个a.vue的组件，我想监听这个组件的滚动，那么在该组件的容器元素上添加ref=”a”,然后通过下面的代码形式来操作：

1 // 通过$refs获取dom元素
2 this.box = this.$refs.a
3 // 监听这个dom的scroll事件
4 this.box.addEventListener('scroll', () => {
5 this.handleScroll();
6 }, false)

上述代码为处理组件滚动监听的主要代码内容。

1 handleScroll() {
2 // 这是一个示例代码，打印出监听滚动的组件滚动距离
3 var scrollTop = this.$refs.a.scrollTop;
4 console.log(scrollTop);
5 }

同样的道理，如果想对a.vue组件内部的某一块结点区域进行滚动监听，也是采用这种方式。
注意点：
如果采用了上述方案没有实现监听滚动的效果，请检查是否出现以下问题：
需要监听滚动的元素结点是否给了height和overflow:scroll
需要监听滚动的元素结点的父元素结点是否设置了高度
在vux中，如果你使用了view-box，你需要给view-box一个高度，因为view-box的父元素高度为100%，所以笔者采取的方案就是将view-box的高度也设置为100%。

1 <view-box ref="viewBox" style="height: 100%;">
2 <router-view></router-view>
3 </view-box>

经检测，此方案有效。