vue监听滚动事件，实现滚动监听(scroll滚动)

Posted 2022-01-30 vayne-n

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue监听滚动事件，实现滚动监听(scroll滚动)相关的知识，希望对你有一定的参考价值。

在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5 <meta charset="UTF-8">
 6 <title>Document</title>
 7 <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
 8 <style type="text/css">
 9 #box 
10 width: 100%;
11 height: 2000px;
12 
13 </style>
14 </head>
15 <div id="box"></div>
16 
17 <body>
18 <!-- vue监听滚动事件 -->
19 <script type="text/javascript">
20 var vm = new Vue(
21 el:‘#box‘,
22 data() 
23 return 
24 scroll: ‘‘
25 
26 ,
27 methods: 
28 menu() 
29 this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
30 console.log(this.scroll)
31 
32 ,
33 mounted() 
34 window.addEventListener(‘scroll‘, this.menu)
35 ,
36 )
37 </script>
38 </body>
39 
40 </html>

以上是关于vue监听滚动事件，实现滚动监听(scroll滚动)的主要内容，如果未能解决你的问题，请参考以下文章

vue子组件监听scroll事件

vue监听滚动事件实现某元素吸顶或者固定位置显示