hfysite/components/public/hideScroll.vue

<template>
<div class="hide-scroll" ref="hide-scroll">
  <div class="scroll-content"  ref="scroll">
    <div :style="`width:${width}px;`">
      <slot></slot>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "hideScroll",
  props: {
    itemHeight: {
      type: Number,
      default: 50
    }
  },
  data(){
    return {
      width:0,
      height: 0,
      timer: null,
      timeWait: 700,// 等待延迟
    }
  },
  mounted(){
    this.width = this.$refs["hide-scroll"].offsetWidth;
    this.height = this.$refs["hide-scroll"].offsetHeight;
    window.addEventListener('resize',()=>{
      this.width = this.$refs["hide-scroll"].offsetWidth;
      this.height = this.$refs["hide-scroll"].offsetHeight;
    })
    let scroll = this.$refs["scroll"]
    scroll.addEventListener('scroll',(e)=>{
      // console.log('scroll change')
      // console.log(scroll.scrollTop)
      if(this.timer){
        clearTimeout(this.timer);
        this.timer = null;
      }
      let scrollTop = scroll.scrollTop;
      let index = Math.floor(scrollTop/this.itemHeight);
      //  获取当前位置应该对应的元素index
      this.timer = setTimeout(()=>{
        this.$emit('onScroll', {
          scrollTop:scrollTop,
          index:index
        });
      },this.timeWait);
    })
  },
  methods:{
  }
}
</script>

<style scoped >
.hide-scroll{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;


}
.hide-scroll .scroll-content{
  width: calc(100% + 100px);
  height: 100%;
  overflow:auto;

}
.hide-scroll .scroll-content div{

}
</style>