页面缩放导致滚动加载失效

项目背景

vue+elementui项目，列表页面滚动加载数据

产生问题

当页面缩放时会导致初始化页面滚动条不存在，无法滚动加载数据

解决方法

当不存在滚动条时利用滚轮事件代替滚动条事件，滚动条出现恢复滚动事件（这里需要恢复滚动条事件是由于拖动滚动条的时候也能触发）

1.给dom绑定两个事件

<el-main @mousewheel.native="handleScroll" @scroll.native="handleScroll">

handleScroll(e) {
 this.$handleScroll(e,$('.el-main')[0]); 
}

2.判断什么时候触发什么事件？
存在滚动条时触发滚动条事件，不存在滚动条触发滚轮事件

isNoScrollBar(el){  //判断是否存在滚动条，el表示滚动条存在的dom
        return el.scrollHeight == el.clientHeight;
}
$handleScroll(e,dom) {
    //缩放的时候滚轮事件不处理e.ctrlKey
    if(!this.isNoScrollBar(dom) && e.type == 'mousewheel' || e.ctrlKey){ //如果存在滚动条并且是滚轮事件时不触发方法
        return;
    }
    this.$scrollQuery(e,dom);   //当没有滚动条时不会触发滚动事件，因此不需要判断，查询数据
}

注意：一定要传递滚动条在的dom,不能使用event.target,滚轮事件触发的目标不一定是滚动条的位置

判读滚动条移动到最底部

let height = $dom.scrollHeight - $dom.scrollTop;
Math.floor(height) == $dom.clientHeight || Math.ceil(height) == $dom.clientHeight  //当缩放时 scrollTop值 可能存在小数