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

<!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.documentElement.scrollTop || document.body.scrollTop;

        console.log(this.scroll)

      }

    },

    mounted() {

      window.addEventListener('scroll', this.menu)

    },

  })

  </script>

</body>

</html>

vue监听滚动事件，实现滚动监听的更多相关文章

  1. 监听table滚动事件，滚动到底部时加载数据

    mounted() { this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.getDistance(event ...

  2. mui 怎样监听scroll事件的滚动距离

    var scroll = mui('.mui-scroll-wrapper').scroll(); document.querySelector('.mui-scroll-wrapper' ).add ...

  3. js滚动事件实现滚动触底加载

    移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断: 首先介绍jquery的写法,代码如下: $(window).scroll(function(){ var windowH=$ ...

  4. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  5. onscroll 元素滚动事件

    阻止事件冒泡 event.stopPropagation(); children():查找合集里面的第一级子元素.(仅儿子辈,这里可以理解为就是父亲-儿子的关) children只查找第一级的子节点 ...

  6. Vue 爬坑之路（七）—— 监听滚动事件 实现动态锚点

    前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...

  7. vue监听滚动事件-元素固定位置显示

    1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...

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

    https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...

  9. vue监听滚动事件

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...

随机推荐

  1. border-radius属性值参数详解

    border-radius是CSS3设置圆角的一个属性,其属性值得单位可以使用:em.px.百分比等等.但是,border-radius属性值得参数形式有好多种,那么具体都代表什么意思呢?下面以实际例 ...

  2. java-6数组

    一. 请编写一个程序将一个整数转换为汉字读法字符串.比如"1123"转换为"一千一百二十三".更进一步,能否将数字表示的金额改为"汉字表达?比如将&q ...

  3. 《javascript个人理解，个人整理。》

    万事开头难. 本人做前端工程师,已几年,没有特别大的,已文字方式去做总结. 前段时间,早已经想好,但是迟迟没有去下笔!好在现在陆陆续续的写下去. 我知道这是一个很大的工程,但是我还是想做下去,不为别的 ...

  4. Android项目实战（三十一）：异步下载apk文件并安装(非静默安装)

    前言: 实现异步下载apk文件 并 安装.(进度条对话框显示下载进度的展现方式) 涉及技术点: 1.ProgressDialog   进度条对话框  用于显示下载进度 2.AsyncTask     ...

  5. Cordova的搭建

    Cordova的搭建 cordova也叫phonegap,可以用来打包网页生成Android或iOS或其他平台的APP,它提供了一些native api,可以让网页调用本地函数,极大地增强了网页的功能 ...

  6. JPA规范及其它持久层框架

    JPA是一种规范,而hibernate是JPA的一种实现 JPA全称为Java Persistence API ,Java持久化API是Sun公司在Java EE 5规范中提出的Java持久化接口.J ...

  7. 基础数据结构-串-KMP算法

    KMP算法用于模式串字符匹配,因为没有提前预习,上课时听得云里雾里,后来回去看了一晚上,翻了一些网上的讲解才理解了.我简单讲一下,我们在一串字符串A里搜索匹配另一段字符串B时,思路最简单方法的就是从第 ...

  8. C#基础 运算符

    运算符分为5类-- 1.算数运算符[加加(++)   减减(--)  加(+)  减(-)  乘(*)  除(/)  取余(%)] (1)前++和后++的区别 using System; using ...

  9. App Store 审核 IPv6 问题

    应用提交了N次,每次被拒都是说IPv6的事情,花点功夫把这个事情搞清楚. 苹果审核人员回复的原因都差不多,说在他们的IPv6-Only的环境中测试应用,无法正常请求我们的服务器. 因为我们的域名确实没 ...

  10. Mutillidae在kali linux上的安装

    XAMPP:下载地址(https://www.apachefriends.org/download.html) Mutillidae:下载地址(http://sourceforge.net/proje ...