vue 项目添加滚动监听事件

ゝ一世哀愁。 2023-06-25 04:58 2阅读 0赞

代码如下

<template>
        <div>
            <p v-for="index in 100" :key="index">滚动监听</p>
        </div>
    </template>
    <script>
    export default {
        methods: {
            scrollMethod() {
                console.log('滚动监听')
                console.log(document.documentElement.scrollTop)
            }
        },
        mounted() {
            // 挂载时，添加监听滚动事件，然后用 scrollMethod 方法进行处理
            window.addEventListener('scroll',this.scrollMethod) 
        },
        destroyed() {
            // 销毁时，删除监听滚动事件，否则其他.vue文件也会受影响
            window.removeEventListener('scroll',this.scrollMethod)
        }
    }
    </script>

运行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191226110841944.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzanp6Y2Jx,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 监听滚动条事件

JS 监听滚动条事件获取滚动条位置代码监听滚动条方法效果 > 获取滚动条位置代码 / 获取滚动条位置 /

朱雀/ 2023年10月04日 18:37/ 0 赞/ 162 阅读

相关 vue 项目添加滚动监听事件

代码如下 <template> <div> <p v-for="index in 100" :key="index">滚动监听

ゝ一世哀愁。/ 2023年06月25日 04:58/ 0 赞/ 3 阅读

相关 vue监听滚动事件实现元素吸顶

添加滚动监听事件： mounted () \{ window.addEventListener('scroll', this.handleScroll) \},

偏执的太偏执、/ 2023年06月14日 04:27/ 0 赞/ 6 阅读

相关 vue的滚动监听事件

scrollGet(e) { // 滚动条高度 e.srcElement.scrollTop, e.target.scrollTop

ゝ一纸荒年。/ 2022年12月18日 10:51/ 0 赞/ 236 阅读

相关 Vue添加销毁监听滚动事件

`添加 window.addEventListener("scroll",this.adsorb) ` `销毁 window.removeEventListen

妖狐艹你老母/ 2022年11月29日 12:53/ 0 赞/ 328 阅读

相关监听滚动条事件

滚动条事件可以监听整个页面也可以监听某一div或者iframe，举例： //监听整个窗口的滚动条 window.onscroll = function()

迈不过友情╰/ 2022年06月07日 23:18/ 0 赞/ 633 阅读

相关 vue监听滚动事件实现元素吸顶-getBoundingClientRect()

需求顶部有banner，当屏幕向上滑动超出banner高度时出现导航思路监听scroll，通过判断当前元素与顶部的距离，来控制导航的显隐实现

亦凉/ 2022年05月15日 01:29/ 0 赞/ 642 阅读

相关页面滚动监听事件

滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed ![4444][]

红太狼/ 2022年02月01日 02:51/ 0 赞/ 512 阅读

相关 vue 监听滚轮滚动事件

<script> export default { name:"vue-scroll", data () {

亦凉/ 2021年12月10日 06:39/ 0 赞/ 696 阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 00:32/ 0 赞/ 518 阅读