您现在的位置是：网站首页> 编程资料编程资料

Vue实现监听某个元素滚动,亲测有效_vue.js_

2023-05-24 377人已围观

简介 Vue实现监听某个元素滚动,亲测有效_vue.js_

监听某个元素滚动,亲测有效

Vue 开发，有时候只需要监听某个元素是否滚动就行了，不需要去监听整个页面。

Vue 有自带的 @scroll 但是并没有什么用，给某个滚动元素加上，滚动该元素并不会调用，加上 CSS 支持滚动样式也一样。

怎么监听呢？通过 addEventListener 与 @mousewheel 配合实现

  • addEventListener: 增加的是拖拽滚动条也能监听到滚动
  • @mousewheel：添加的是非拖拽滚动条滚动，比如在元素上鼠标或者触摸板滚动。

案例效果

监听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: '';     }   } }

这样就可以控制当dom元素滚动到可视区的时候，给他添加动画样式了。

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

您可能感兴趣的文章:

上一篇：vue如何监听页面的滚动的开始和结束_vue.js_

下一篇：JS实现表格响应式布局技巧_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网