vue监听当前页面滚动高度

data(){
    return{
        scroll:''
    }
},
mounted(){
    window.addEventListener('scroll',this.handleScroll)
},
methods:{
    handleScroll(){
        //或者使用document.querySelector('.class或者#id').scrollTop
        this.scroll = document.documentElement.scrollTop||document.body.scrollTop
        console.log(this.scroll)
    }
},
//销毁,否则跳到别的路由还是会出现
destroyed(){
    window.removeEventListener('scroll',this.handleScroll)
}

  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在Vue3中监听滚轮高度,你可以使用mounted钩子函数和window的scroll事件来实现。下面是一个示例代码: ```javascript data() { return { scrollHeight: 0 }; }, mounted() { window.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { this.scrollHeight = document.documentElement.scrollTop || document.body.scrollTop; } } ``` 在这个示例中,我们通过在data中定义一个scrollHeight属性来保存滚轮的高度。在mounted钩子函数中,我们添加了一个scroll事件监听器,并将事件处理函数设置为handleScroll。在handleScroll函数中,我们使用`document.documentElement.scrollTop || document.body.scrollTop`来获取滚轮的高度,并将其赋值给scrollHeight属性。 这样,每当用户滚动页面时,handleScroll函数将被触发,scrollHeight属性将被更新为当前滚轮的高度。你可以在模板中使用这个属性来实现你需要的逻辑。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3监听滚轮高度事件](https://blog.csdn.net/m0_72196169/article/details/129771890)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [VUE3 实时监听页面滚动高度 ,改变nav/title的 透明度](https://blog.csdn.net/Eternity_matt/article/details/121064416)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue 解除鼠标的监听事件的方法](https://download.csdn.net/download/weixin_38749268/12932141)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值