vue监听滚动事件，实现滚动监听
在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监听滚动事件，实现滚动监听的更多相关文章
- 监听table滚动事件，滚动到底部时加载数据
mounted() { this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.getDistance(event ...
- mui 怎样监听scroll事件的滚动距离
var scroll = mui('.mui-scroll-wrapper').scroll(); document.querySelector('.mui-scroll-wrapper' ).add ...
- js滚动事件实现滚动触底加载
移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断: 首先介绍jquery的写法,代码如下: $(window).scroll(function(){ var windowH=$ ...
- js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写
js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...
- onscroll 元素滚动事件
阻止事件冒泡 event.stopPropagation(); children():查找合集里面的第一级子元素.(仅儿子辈,这里可以理解为就是父亲-儿子的关) children只查找第一级的子节点 ...
- Vue 爬坑之路（七）—— 监听滚动事件 实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑 ...
- vue监听滚动事件-元素固定位置显示
1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...
- vue监听滚动事件
vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted( ...
随机推荐
- Extjs mvc
MVC的模式,模型(Models)和控制器(Controllers) Model模型 是字段和它们的数据的集合,例如User模型带有username和password字段,模型知道如何持久化自己的数据 ...
- phpcms v9更改后台文章排序的方法
后台文章排序怎么才可以按自己输入的数字排列?如按4,3,2,1,从大到小排列?实现方法如下: 修改文件: phpcms\modules\content 中的 content.php 代码如下: $da ...
- 【WC2015】混淆与破解 （Goldreich-Levin 算法）
这个嘛= =直接贴VFK的题解就行了吧，感觉自己还是差别人太多 http://vfleaking.blog.uoj.ac/blog/104 讲得挺明白了的说，但还是挺难理解的说，中间实现部分简直不要太 ...
- Noip 2014酱油记+简要题解
好吧，day2T1把d默认为1也是醉了，现在只能期待数据弱然后怒卡一等线吧QAQ Day0 第一次下午出发啊真是不错，才2小时左右就到了233，在车上把sao和fate补掉就到了= = 然后到宾馆之后 ...
- BZOJ 1076: [SCOI2008]奖励关(概率+dp)
首先嘛，看了这么久概率论真的不错啊。看到就知道怎么写（其实也挺容易的= =） 直接数位dp就行了 CODE： #include<cstdio> #include<cstring> ...
- chrome浏览器美化插件：让你的浏览器页面冒水泡, 游小鱼儿
下载插件和效果图 这是一个让你的浏览器冒泡泡的插件, 浏览网页的时候仿佛置身于海底世界: 插件下载地址:http://files.cnblogs.com/files/diligenceday/chro ...
- php审核操作
注册页面zhuce.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 用OC和Swift一起说说二叉树
前言: 一:在计算机科学中,二叉树是每个节点最多有两个子树的树结构.通常子树被称作"左子树"(left subtree)和"右子树"(right subt ...
- Hibernate一对一主键映射
Hibernate一对一主键映射 ------------------------------ -- ...
- Kafka Eagle 源码解读
1.概述 在<Kafka 消息监控 - Kafka Eagle>一文中,简单的介绍了 Kafka Eagle这款监控工具的作用,截图预览,以及使用详情.今天笔者通过其源码来解读实现细节.目 ...