Vue的Scroll滚动事件触发方式

 更新时间:2022年04月23日 14:06:18   作者:Daniel·M  
这篇文章主要介绍了Vue的Scroll滚动事件触发方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Scroll滚动事件触发

切记 当你需要滚动事件触发 千万不要加 overflow-y: auto; 一旦加了 就 全是 0

例子

去掉 overflow-y: auto;

如果你需要把这个页面当做子组件引入 需要加true 因为 ···· 请看最后一张图片 如果不加true 不变成捕获事件 则无法成功引用

<template>
    <div class="totop">
        <div class="btnTop" v-if="btnFlag" @click="backTop()">
            <van-icon name="arrow-up" size="40" color="#CF9B6B" class="imga"/>
        </div>
    </div>
</template>
<script>
export default {
    name: "totop",
    data() {
        return {
            btnFlag: false,
        };
    },
    // 利用VUE写一个在控制台打印当前的scrollTop。首先,在 mounted 钩子中给window添加一个滚动滚动监听事件
    mounted() {
        window.addEventListener("scroll", this.scrollToTop,true);
        //如果你需要把这个页面当做子组件引入 需要加true 因为 ····  请看最后一张图片
    },
    destroyed() {
        window.removeEventListener("scroll", this.scrollToTop,true);
    },
    methods: {
        // 点击图片回到顶部方法,加计时器是为了过渡顺滑
        backTop() {
            let that = this;
            let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop =
                        that.scrollTop + ispeed;
                if (that.scrollTop === 0) {
                    clearInterval(timer);
                }
            }, 16);
        },
        // 监听回到顶部按钮距浏览器顶部的距离,滚动的距离如果大于浏览器高度时,设置 btnFlag 为true,否则就是false
        scrollToTop() {
            let that = this;
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            that.scrollTop = scrollTop;
            console.log(scrollTop)
            //为了计算距离顶部的高度,当高度大于50显示回顶部图标,小于50则隐藏
            if (that.scrollTop > 50) {
                that.btnFlag = true;
            } else {
                that.btnFlag = false;
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.totop {
    position: fixed;
    right: 40px;
    bottom: 60px;
    width: 50px;
    height: 50px;
    padding: 10px;
    cursor: pointer;
}
.imga {
    position: relative;
    top: -20px;
    left: 15px;
    text-align: center;
    line-height: 50px;
    border: 3px solid #CF9B6B;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
</style>

监听Scroll事件无效

1.监听的dom元素设定高度,子元素的内容要超过容器的高度

2.设定overflow为:auto/scroll,默认值为visible,无法触发

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

相关文章

  • vue中监听路由参数的变化及方法

    vue中监听路由参数的变化及方法

    这篇文章主要介绍了vue中监听路由参数的变化,给大家介绍了vue中监听路由参数变化的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue弹窗组件的使用(传值),以及弹窗只能触发一次的问题

    vue弹窗组件的使用(传值),以及弹窗只能触发一次的问题

    这篇文章主要介绍了vue弹窗组件的使用(传值),以及弹窗只能触发一次的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue组件封装方案实现浅析

    Vue组件封装方案实现浅析

    这篇文章主要介绍了Vue组件封装方案实现,我们将从分析组件封装的优势开始,然后依次介绍 vue.js 的基本概念,以及如何创建、封装和使用自定义组件
    2023-03-03
  • Vue2.0系列之过滤器的使用

    Vue2.0系列之过滤器的使用

    这篇文章主要介绍了Vue2.0系列之过滤器的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 实现一个 Vue 吸顶锚点组件方法

    实现一个 Vue 吸顶锚点组件方法

    这篇文章主要介绍了实现一个 Vue 吸顶锚点组件方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Vue2 cube-ui时间选择器详解

    Vue2 cube-ui时间选择器详解

    这篇文章主要为大家介绍了Vue2 cube-ui时间选择器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • vue基于element的区间选择组件

    vue基于element的区间选择组件

    这篇文章主要介绍了vue基于element的区间选择组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue+Bootstrap实现简易学生管理系统

    Vue+Bootstrap实现简易学生管理系统

    这篇文章主要为大家详细介绍了Vue+Bootstrap实现简易学生管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • vue中使用axios固定url请求前缀

    vue中使用axios固定url请求前缀

    这篇文章主要介绍了vue中使用axios固定url请求前缀的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue在路由中验证token是否存在的简单实现

    vue在路由中验证token是否存在的简单实现

    今天小编就为大家分享一篇vue在路由中验证token是否存在的简单实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论