监听滚动条 

 1  mounted(){
 2    window.addEventListener('scroll', this.handleScroll);
 3  }
 4  
 5  method:{
 6  // 监听滚动事件
 7  handleScroll () {
 8 
 9 
10 bindScroll(event) {
11 // console.log(event)
12 // 滚动的高度
13 const scrollTop =
14 (event.srcElement
15 ? event.srcElement.documentElement.scrollTop
16 : false) ||
17 window.pageYOffset ||
18 (event.srcElement ? event.srcElement.body.scrollTop : 0);
19 // 视窗高度
20 const clientHeight =
21 (event.srcElement && event.srcElement.documentElement.clientHeight) ||
22 document.body.clientHeight;
23 // 页面高度
24 const scrollHeight =
25 (event.srcElement && event.srcElement.documentElement.scrollHeight) ||
26 document.body.scrollHeight;
27 // 距离页面底部的高度
28 const height = scrollHeight - scrollTop - clientHeight;
29 
30 // console.log(height, scrollHeight, scrollTop, clientHeight);
31 },
32 
33 },
34  
35  }
36   
37  destroyed () {  //  记得销毁监听不然耗性能
38  window.removeEventListener('scroll', this.handleScroll)
39  },

 

posted @ 2019-09-24 17:31  山外已有山  阅读(1695)  评论(0)    收藏  举报