vue 页面监听滚动条

项目要求写商城商品详情的时候需要的效果跟大疆官网商城效果一样。

 样式：（右侧商品基本信息高度超过左侧商品照片时，页面整体滚动到浏览器最顶部时左侧照片固定，右侧继续滚动，滚到左右两侧底部对齐的时候，一起向上滚）

1、app.vue

   @scroll="showHeader"事件绑到 #app元素上

     <router-view :scrollTopForApp='scrollTopForApp' v-if="$route.meta.keepAlive" class="main"></router-view>

data(){

 return {

      scrollTopForApp:0,

    }

}

  method：showHeader (e) {

      this.scrollTopForApp = e.target.scrollTop || 0

    },

2、你需要监听的页面

左侧照片元素 <div class="detail-left  :class="{xcq:topx,xcqb:bottomx}" ref="leftHeight" >

右侧信息元素 <div class="detail-right" :style="{left:topx || bottomx?'600px':'80px'}" ref="Fixed">

  props: ['scrollTopForApp'],

data(){

return:{

      rightDom: {},  //

      leftDom: {},

      topx:0,  

      bottomx:false,

}}

method:{

   async getDetail() {

        //获取商品。。。。。

        this.$nextTick(() => {

        console.log(this.scrollTopForApp)

        this.rightDom.height = this.$refs.Fixed.offsetHeight    //获取右侧商品基本介绍元素高度

        this.leftDom.height = this.$refs.leftHeight.offsetHeight     //获取左侧商品照片元素高度

        console.log(this.rightDom)

        console.log(this.leftDom)

      })

      }

      return detail

    },

 watch: {

    scrollTopForApp(n,m){    //监听scrollTopForApp

      let a = this.$refs.leftHeight.getBoundingClientRect().top    //获取左侧照片距离顶部距离

       let a_h = this.$refs.leftHeight.offsetHeight

    if(a<0){

      this.topx=true

    }

     let b = this.$refs.detail.offsetHeight

     let c =  this.$refs.detail.getBoundingClientRect().top

      if(c>0){

      this.topx=false

    }

     if(d<a_h){

       this.topx = false

       }

      this.bottomx = d<a_h

    },

}

}

css:  

  左侧：.xcq{   //首先要定位

    position: fixed;

    top:0

  }

  .xcqb{      //左侧在与右侧底部距离一致时，position需要变为absolute可实现与右侧一起向上继续滚动

    position: absolute;

    bottom: 0;

  }

右侧：&-right {    右侧始终 position: relative;

    position: relative;

}