Vue中滚动事件，实现某元素在页面可见时出现

这是一个笨办法

Vue中滚动事件

我想实现的效果是当页面滚动到某元素在页面可见时出现
思路就是监听页面滚动事件，滚动到某一位置设置元素可见。

1. 监听滚动事件

在mounted钩子中给window添加一个滚动监听事件

mounted() {
	window.addEventListener('scroll', this.handleScroll)
},

在methods中添加handleScroll方法

handleScroll() {
    var clientheight = document.documentElement.clientHeight;
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}

2.监听元素到顶部的距离，并得到页面的高度，并判断当页面高度+页面滚动的距离大于元素到顶部的距离时设置元素可见

handleScroll() {
    var exp_height = $('.experience').offset().top;
    var clientheight = document.documentElement.clientHeight;
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    if(clientheight+scrollTop > exp_height) {
           this.exp_class = true;
    }
}

先写两个样式

<style>
.wrapanimate {
    visibility: hidden;
}
.wrapanimated {
    visibility: visible;
}
</style>

然后将需要被设置的元素的class与exp_class绑定，当exp_class为true时，就应用wrapanimated这个样式

<template>
	<div>
		<div :class="exp_class == true ? 'wrapanimated' : 'wrapanimate'">我是需要元素</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				exp_class : false
			}
		}
	}
</script>

也可以使用vue中的v-show指令

<template>
	<div>
		<div v-show="exp_class">我是需要元素</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				exp_class : false
			}
		}
	}
</script>

当然v-show指令与display:none效果一样，是不占据页面空间的，而visibility: hidden;还会占据空间，所以根据自身需求以及用户体验来决定使用哪种方法。

3.当离开这个页面时需要移除这个监听事件，不然会报错

destroyed () {
     window.removeEventListener('scroll', this.handleScroll)
},