zoukankan      html  css  js  c++  java
  • 监听滚动条

     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  },
  • 相关阅读:
    MySQL基础
    DNS域名解析服务
    仿Mars MP3播放器项目5
    仿Mars MP3播放器项目4
    仿Mars MP3播放器项目3
    仿Mars MP3播放器项目2
    仿Mars MP3播放器项目1
    JAVA 随记1
    Redis和Memcache的区别
    php用smtp发送邮件
  • 原文地址:https://www.cnblogs.com/lujunan/p/11579629.html
Copyright © 2011-2022 走看看