iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue监听页面滚动到某个高度触发事件流程
  • 582
分享到

vue监听页面滚动到某个高度触发事件流程

2024-04-02 19:04:59 582人浏览 八月长安
摘要

目录监听页面滚动到某个高度触发事件动态监听页面滚动高度监听页面滚动到某个高度触发事件 methods: {    showIcon() {       if (         !!

监听页面滚动到某个高度触发事件

methods: {
   showIcon() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 200
       ) {            
            页面高度大于200执行操作
        } else {
             页面高度小于200执行操作
        }
    },
}

监听事件

mounted() {
    window.addEventListener("scroll", this.showIcon);
},

动态监听页面滚动高度

//获取页面滚动高度
methods:{
      scrollHandle(e){
      let top = e.srcElement.scrollingElement.scrollTop;    // 获取页面滚动高度
      console.log(top);
        }
}
mounted(){
          window.addEventListener('scroll',this.scrollHandle);//绑定页面滚动事件
      },

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

--结束END--

本文标题: vue监听页面滚动到某个高度触发事件流程

本文链接: https://www.lsjlt.com/news/147007.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue监听页面滚动到某个高度触发事件流程
    目录监听页面滚动到某个高度触发事件动态监听页面滚动高度监听页面滚动到某个高度触发事件 methods: {    showIcon() {       if (         !!...
    99+
    2024-04-02
  • vue怎么监听页面滚动到某个高度触发事件
    本篇内容主要讲解“vue怎么监听页面滚动到某个高度触发事件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么监听页面滚动到某个高度触发事件”吧!监听页面滚动到某个高度触发事件methods...
    99+
    2023-06-30
  • vue监听页面中的某个div的滚动事件并判断滚动的位置
      在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个di...
    99+
    2024-04-02
  • vue监听页面滚动事件怎么配置
    在Vue中监听页面滚动事件,可以通过在`mounted`钩子函数中添加滚动事件监听器。具体步骤如下:1. 在Vue组件中添加一个监听...
    99+
    2023-09-20
    vue
  • 如何使用vue监听页面中某个div的滚动事件并判断滚动位置
    这篇文章主要介绍如何使用vue监听页面中某个div的滚动事件并判断滚动位置,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!  在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作