温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue的Scroll滚动事件触发方式是什么

发布时间:2022-04-24 10:33:36 来源:亿速云 阅读:270 作者:iii 栏目:开发技术

这篇文章主要介绍了Vue的Scroll滚动事件触发方式是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue的Scroll滚动事件触发方式是什么文章都会有所收获,下面我们一起来看看吧。

    Scroll滚动事件触发

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

    例子

    Vue的Scroll滚动事件触发方式是什么

    去掉 overflow-y: auto;

    Vue的Scroll滚动事件触发方式是什么

    如果你需要把这个页面当做子组件引入 需要加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>

    Vue的Scroll滚动事件触发方式是什么

    Vue的Scroll滚动事件触发方式是什么

    Vue的Scroll滚动事件触发方式是什么

    监听Scroll事件无效

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

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

    关于“Vue的Scroll滚动事件触发方式是什么”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue的Scroll滚动事件触发方式是什么”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI