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

<template> 
	<div class="body-container" @scroll="scrollEvent($event)"> 
		<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”>

当我在这个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定位。

引用：https://download.csdn.net/download/weixin_38553275/12934316?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-download-2%7Edefault%7ECTRLIST%7EAntiPaid-1-12934316-blog-128871825.235%5Ev28%5Epc_relevant_t0_download&depth_1-utm_source=distribute.pc_relevant.none-task-download-2%7Edefault%7ECTRLIST%7EAntiPaid-1-12934316-blog-128871825.235%5Ev28%5Epc_relevant_t0_download&utm_relevant_index=2