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元素滚动到可视区的时候,给他添加动画样式了。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • v-html渲染组件问题

    v-html渲染组件问题

    最近在学习vue,今天正好发现个问题,本文介绍了v-html渲染组件问题,整理了问题的解决方法,有需要的小伙伴可以参考下
    2021-05-05
  • VUE+Element实现增删改查的示例源码

    VUE+Element实现增删改查的示例源码

    这篇文章主要介绍了VUE+Element实现增删改查的示例源码,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-11-11
  • vue cli3配置image-webpack-loader方式

    vue cli3配置image-webpack-loader方式

    这篇文章主要介绍了vue cli3配置image-webpack-loader方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 关于element-ui表头吸附问题的解决方案

    关于element-ui表头吸附问题的解决方案

    数据过多滑动表格的时候,看不到表头不知道对应的数据是什么,用户体验操作不友好,要改成表头固定住,所以本文给大家介绍了关于element-ui表头吸附问题的两个解决方案,需要的朋友可以参考下
    2024-01-01
  • Vue模拟el-table演示插槽用法的示例详解

    Vue模拟el-table演示插槽用法的示例详解

    很多人知道插槽分为三种,但是实际到elementui当中为什么这么用,就一脸懵逼,接下来就跟大家聊一聊插槽在elementui中的应用,并且自己写一个类似el-table的组件,感兴趣的可以了解一下
    2023-05-05
  • vue父子组件的嵌套的示例代码

    vue父子组件的嵌套的示例代码

    本篇文章主要介绍了vue父子组件的嵌套的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vant2移动端Vue组件库问题记录

    Vant2移动端Vue组件库问题记录

    Vant是一套轻量、可靠的移动端组件库,通过Vant可以快速搭建出风格统一的页面,提升开发效率,下面这篇文章主要给大家介绍了关于Vant2移动端Vue组件库问题的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue实现h5扫码的代码示例

    vue实现h5扫码的代码示例

    html5-qrcode是一个基于JavaScript 轻量级和跨平台的扫码插件,允许用户使用摄像头扫描二维码,并且解析为文本或者url,本文给大家介绍了vue实现h5扫码,需要的朋友可以参考下
    2024-01-01
  • nuxt3中server routes的使用详解

    nuxt3中server routes的使用详解

    本文主要介绍了nuxt3中server routes的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Vue如何引入远程JS文件

    Vue如何引入远程JS文件

    本篇文章主要介绍了Vue引入远程JS文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04

最新评论