zoukankan      html  css  js  c++  java
  • vue 中监听页面滚动

    监听页面滚动

    在methods中定义一个方法

    
    
    handleScroll() {
    //获取滚动时的高度
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            let oneHeight = this.$refs.scrollOne.offsetHeight ;
            let twoHeight = this.$refs.scrollTwo.offsetHeight + oneHeight;
            let threeHeight = this.$refs.scrollThree.offsetHeight + twoHeight;
            // 
            // console.log(scrollTop)
            if (scrollTop > 0) {
              //滚动大于0的时候要做的操作
            }
            if (scrollTop > 200) {
              //大于200的时候要做的操作
            }
            if (scrollTop > oneHeight) {
              //这是滑动到scrollTwo的距离要做的操作
    } if (scrollTop > twoHeight) { //这是滑动到scrollThree要做的操作 }

    html中

    <div class="gooddetail-info">
            <div ref="scrollOne"></div>
            <div ref="scrollTwo"></div>
            <div ref="scrollThree"></div>
     </div>

    在mounted监听

     mounted() {
          window.addEventListener("scroll",this.handleScroll); 
    },

    最后要销毁这个监听要不然会在其他的页面中 执行 报错

    destroyed() {
          document.removeEventListener('scroll', this.handleScroll)
        }
  • 相关阅读:
    使用nacos遇到的一些问题
    nodejs连接redis集群
    redis集群部署
    mongodb集群部署
    Mongodb删除重复数据
    docker exception
    .NET Code WebApi CentOS部署
    .NET Core 在Visual Studio Code的基本操作命令
    Mongodb对内嵌数组的增删改
    System.Web.Optimization
  • 原文地址:https://www.cnblogs.com/toughy/p/11805844.html
Copyright © 2011-2022 走看看