vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

vue使⽤@scroll监听滚动事件时，@scroll⽆效问题的解决⽅法
详解
本⽂实例讲述了vue使⽤@scroll监听滚动事件时，@scroll⽆效问题的解决⽅法。

分享给⼤家供⼤家参考，具体如下：
在⽹上看了⼀下vue中监听滚动条滚动事件，清⼀⾊的使⽤document.addEventListener('scroll',function(){})
我是在做滚动条滑到底部时，⾃动加载更多的时候有这个需求。

我认为使⽤document.addEventListener会破坏vue的统⼀性，对我这种有轻微代码强迫症的⼈来说，让我感觉很不爽。

⽽且这种做法，会让你更加难以判断是否滑动到底部了，特别是当你并不是整页滚动，⽽是页⾯中拥有⼀个fixed固定的头部时。

在.vue的组件中
<template>
<div class="body-container" @scroll="scrollEvent">
<ul>
<li></li>
……
<li></li>
</ul>
</div>
<template>
export default {
name: 'demo',
data () {
return {
msg: '',
}
},
methods: {
scrollEvent(e){
console.log(e)
},
}
}
照上⾯的写法，我发现即使我的li标签⾜够多，撑满⼀页，页⾯滚动的时候并不能触发到scrollEvent，是什么原因呢？
经过仔细思考，猜想应该是滚动事件并不是在我<div class="body-container" @scroll="scrollEvent">这个div上触发的，因为滚动条并没有出现在我这个div上。

这个div完全被li标签撑起来了，产⽣滚动事件的就是document了。

于是做了⼀个⼩试验，定义⼀个固定⾼度的div
<div style="height: 300px" @scroll="scrollEvent">
<div style="height: 200px"></div>
<div style="height: 200px"></div>
<div style="height: 200px"></div>
</div>
当我在这个300px固定⾼度的div中滚动的时候，果然触发了scrollEvent，问题原因找到了，接下来就是解决了。

只要我能让<div class="body-container" @scroll="scrollEvent">拥有固定⾼度，就能触发滚动事件了。

但是固定⾼度怎么给呢，各个⼚商的⼿机屏幕⾼度都是不⼀样的，总不能让某些⼿机显⽰不完全，或者底部留空⽩吧。

当然后办法啦！就是吧html,body,.body-container{height:100%}这样，我的.body-container就能继承到document的⾼度了；
还有另⼀个办法，让.body-container使⽤fixed定位
.body-container{
position: fixed;
top:6rem;
left: 0;
right:0;
bottom: 0;
overflow: auto
}
因为上下左右的位置都固定了，所以div⾃然也就有了固定⾼度，此⽅法适⽤于页⾯有⼀个固定⾼度的头部导航，我项⽬中有⼀个6rem⾼的头部导航，所以我采⽤了fixed定位。

接下来就是验证是否滑到了底部
export default {
name: 'demo',
data () {
return {
msg: '',
}
},
methods: {
scroll(e){
//滚动的像素+容器的⾼度>可滚动的总⾼度-100像素
if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100){
this.loadMore(); //加载更多
}
},
}
}
这样就能⽐较清晰的判断是否滚动到了底部。

但是如果仅仅这样写，当滚动到底部100px内时，会触发很多次加载更多，所以我们需要增加⼀些判断条件
methods: {
scroll(e){
// !this.moreLoading 没有在加载状态，触发加载更多时，把this.moreLoading置未true
// !this.noMore 没有更多的状态为false，当我们取到的数据长度⼩于1页的数量时，就没有更多了数据了，把 this.noMore置为true，这样就不会触发⽆意义的加载更多了 if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100 && !this.moreLoading && !this.noMore){
this.loadMore();
}
},
}
⾄此，功能完美的实现了，⽽且没有使⽤document.addEventListener破坏vue的完整性，感觉⾃⼰棒棒哒！
希望本⽂所述对⼤家vue.js程序设计有所帮助。