Vue实现监听某个元素滚动,亲测有效
更新时间:2022年07月27日 10:42:49 作者:卡尔特斯
这篇文章主要介绍了Vue实现监听某个元素滚动,亲测有效!具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
监听某个元素滚动,亲测有效
Vue 开发,有时候只需要监听某个元素是否滚动就行了,不需要去监听整个页面。
Vue 有自带的 @scroll 但是并没有什么用,给某个滚动元素加上,滚动该元素并不会调用,加上 CSS 支持滚动样式也一样。
怎么监听呢?通过 addEventListener 与 @mousewheel 配合实现
addEventListener
: 增加的是拖拽滚动条也能监听到滚动@mousewheel
:添加的是非拖拽滚动条滚动,比如在元素上鼠标或者触摸板滚动。
<template> <!-- 滚动视图 --> <div class="scrollview" ref="scrollview" @mousewheel="scrollChange"> <!-- 内容区域 --> <div class="content"></div> </div> </template>
<script> export default { mounted () { // 获取指定元素 const scrollview = this.$refs['scrollview'] // 添加滚动监听,该滚动监听了拖拽滚动条 // 尾部的 true 最好加上,我这边测试没加 true ,拖拽滚动条无法监听到滚动,加上则可以监听到拖拽滚动条滚动回调 scrollview.addEventListener('scroll', this.scrollChange, true) }, // beforeDestroy 与 destroyed 里面移除都行 beforeDestroy () { // 获取指定元素 const scrollview = this.$refs['scrollview'] // 移除监听 scrollview.removeEventListener('scroll', this.scrollChange, true) }, methods: { // 滚动监听 scrollChange () { console.log('滚动中') } } } </script>
<style scoped> .scrollview { height: 100px; overflow-y: auto; background-color: yellow; } .content { height: 500px; background-color: red; } </style>
案例效果
监听dom元素滚动到了可视区?
场景:当某个元素滚动到可视区时,为其添加动画样式(animate.css)。
common/utils.js
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() { // 监听滚动事件 window.addEventListener("scroll", this.scrollToTop); }, beforeRouteLeave(to, form, next) { // 离开路由移除滚动事件 window.removeEventListener('scroll',this.scrollToTop); next(); }, methods: { // 滚动事件 scrollToTop() { !isElementNotInViewport(this.$refs.header) ? this.header_Animate = true: ''; } } }
<template> <div ref="header" class="animate__animated" :class="{animate__slideInLeft:header_Animate}"> </div> </template>
这样就可以控制当dom元素滚动到可视区的时候,给他添加动画样式了。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue cli3配置image-webpack-loader方式
这篇文章主要介绍了vue cli3配置image-webpack-loader方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07
最新评论