vue滚动监听插件vuewaypoint

js:

data中的参数配置&＃xff1a; intersectionOptions: {root: document.querySelector("#app"), //用作视口的元素&＃xff0c;用于检查目标的可见性。必须是目标的祖先。如果未指定&＃xff0c;则默认为浏览器视口nullrootMargin: "0px",threshold: 0.33 //范围为 0-1: 阈值为1.0意味着当100&＃xff05;的目标在root选项指定的元素中可见时&＃xff0c;将调用回调}

intersectionOptions配置参考&＃xff1a;https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

methods中滚动触发的回调方法&＃xff1a;onWaypoint({ el, going, direction, _entry }) {// going: in, out// direction: top, right, bottom, leftif (going &＃61;&＃61;&＃61; this.$waypointMap.GOING_IN) {console.log("waypoint going in!"); //激活-出现了}if (going &＃61;&＃61;&＃61; this.$waypointMap.GOING_OUT) {console.log("waypoint going out!");}if (direction &＃61;&＃61;&＃61; this.$waypointMap.DIRECTION_TOP) {console.log("waypoint going top!");}if (direction &＃61;&＃61;&＃61; this.$waypointMap.DIRECTION_BOTTOM) {console.log("waypoint going bottom!");}}

css:

.waypoint {height: 500px;background: #420983;
}
.waypoint p {background: #42b983;margin: 3px;
}
3.介绍&＃xff1a;

1.当向上滚动到出现33%的时候&＃xff0c;触发回调函数的top

2.当继续向上滚动到出现剩余的33%的时候&＃xff0c;再次触发回调函数的top

3.当向下滚动到出现33%的时候&＃xff0c;触发回调函数的bottom

4.当继续向下滚动到出现剩余的33%的时候&＃xff0c;触发回调函数的bottom

参考资料&＃xff1a;https://github.com/scaccogatto/vue-waypoint