<template>
? <!-- 滾動(dòng)視圖 -->
? <div class="scrollview" ref="scrollview" @mousewheel="scrollChange">
? ? <!-- 內(nèi)容區(qū)域 -->
? ? <div class="content"></div>
? </div>
</template>

<script>
export default {
? mounted () {
? ? // 獲取指定元素
? ? const scrollview = this.$refs['scrollview']
? ? // 添加滾動(dòng)監(jiān)聽，該滾動(dòng)監(jiān)聽了拖拽滾動(dòng)條
? ? // 尾部的 true 最好加上，我這邊測(cè)試沒(méi)加 true ，拖拽滾動(dòng)條無(wú)法監(jiān)聽到滾動(dòng)，加上則可以監(jiān)聽到拖拽滾動(dòng)條滾動(dòng)回調(diào)
? ? scrollview.addEventListener('scroll', this.scrollChange, true)
? },
? // beforeDestroy 與 destroyed 里面移除都行
? beforeDestroy () {
? ? // 獲取指定元素
? ? const scrollview = this.$refs['scrollview']
? ? // 移除監(jiān)聽
? ? scrollview.removeEventListener('scroll', this.scrollChange, true)
? },
? methods: {
? ? // 滾動(dòng)監(jiān)聽
? ? scrollChange () {
? ? ? console.log('滾動(dòng)中')
? ? }
? }
}
</script>

<style scoped>
.scrollview {
? height: 100px;
? overflow-y: auto;
? background-color: yellow;
}
.content {
? height: 500px;
? background-color: red;
}
</style>

export const isElementNotInViewport = function(el) {
?? ?if (el) {
?? ??? ?let rect = el.getBoundingClientRect();
?? ??? ?return (
?? ??? ??? ?rect.top >=
?? ??? ??? ??? ?(window.innerHeight || document.documentElement.clientHeight) ||
?? ??? ??? ?rect.bottom <= 0
?? ??? ?);
?? ?}
};

import { isElementNotInViewport } from "common/utils";
export default {
? ?...
? data() {
? ? return {
? ? ? header_Animate: false
? ? }
? },
? mounted() {
? ? // 監(jiān)聽滾動(dòng)事件
? ? window.addEventListener("scroll", this.scrollToTop);
? },
? beforeRouteLeave(to, form, next) {
? ? // 離開路由移除滾動(dòng)事件
? ? window.removeEventListener('scroll',this.scrollToTop);
? ? next();
? },
? methods: {
? ? // 滾動(dòng)事件
? ? scrollToTop() {
?? ? ?!isElementNotInViewport(this.$refs.header) ? this.header_Animate = true: '';
? ? }
? }
}

<template>
? <div?
? ? ref="header"?
? ? class="animate__animated"?
? ? :class="{animate__slideInLeft:header_Animate}">
? </div>
</template>