vue监听滚动事件实现滚动监听

最新推荐文章于 2024-05-22 13:52:22 发布

Jarvan大熊

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量8k

点赞数

分类专栏： Vue.js web app 文章标签： Vue.js

本文链接：https://blog.csdn.net/dx18520548758/article/details/78320888

版权

Vue.js 同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

web app

2 篇文章 0 订阅

订阅专栏

 
      <!DOCTYPE html> 
     
      < 
      html 
       lang 
      = 
      "en" 
      > 
     
      < 
      head 
      > 
     
      < 
      meta 
       charset 
      = 
      "UTF-8" 
      > 
     
      < 
      title 
      >Document</ 
      title 
      > 
     
      < 
      script 
       type 
      = 
      "text/javascript" 
       src 
      = 
      "https://unpkg.com/vue@2.2.6/dist/vue.js" 
      ></ 
      script 
      > 
     
      < 
      style 
       type 
      = 
      "text/css" 
      > 
     
      #box { 
     
      width: 100%; 
     
      height: 2000px; 
     
      } 
     
      </ 
      style 
      > 
     
      </ 
      head 
      > 
     
      < 
      div 
       id 
      = 
      "box" 
      ></ 
      div 
      > 
     
      < 
      body 
      > 
     
      <!-- vue监听滚动事件 --> 
     
      < 
      script 
       type 
      = 
      "text/javascript" 
      > 
     
      var vm = new Vue({ 
     
      el:'#box', 
     
      data() { 
     
      return { 
     
      scroll: '' 
     
      } 
     
      }, 
     
      methods: { 
     
      menu() { 
     
      this.scroll = document.body.scrollTop; 
     
      console.log(this.scroll) 
     
      } 
     
      }, 
     
      mounted() { 
     
      window.addEventListener('scroll', this.menu) 
     
      }, 
     
      }) 
     
      </ 
      script 
      > 
     
      </ 
      body 
      > 
     
      </ 
      html 
      >