vue 上拉加载 @scroll 并解决 scrollTop失效问题

废话不多说 上代码

<div class="content" ref="scroll" @scroll="handleScroll">
	<child	:file-list="fileList"></child>
</div>




handleScroll:function() {
     
	var that = this;
	clearTimeout(this.timer)
  	this.timer = setTimeout(()=>{
     
       let {
      scrollTop,clientHeight,scrollHeight} = this.$refs.scroll;
       if(scrollTop+clientHeight+20>scrollHeight){
     
	       //加载方法
   		}
   },13)
},

scrollTop失效问题

有两种解决方法

1. 就是给content 加固定的高度；
2. 使用 fixed定位

此方法适用于页面有一个固定高度的头部导航

.content {
     
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto
}