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( ...
随机推荐
- matlab 逻辑数组及其应用
这几天学习了matlab的逻辑数组功能,总的感觉就有两点: 第一,通过对原来的数组a进行逻辑判断后得到逻辑数组b 第二,逻辑数组进行某种运算符操作又回到原数组类型 第三,利用逻辑数组mask功能 测试 ...
- c#配置文件的简单操作
// 配置文件 <?xml version="1.0" encoding="utf-8" ?> <configuration> < ...
- xcode8 更新cocoapods
一.升级ruby环境,由于目前淘宝Ruby镜像升级有问题,所以使用了 http://rubygems-china.oss.aliyuncs.com 二.需要操作的步骤: 1.检查你的ruby源,终端输 ...
- 本地Solr服务器搭建
一.Solr官网下载http://lucene.apache.org/solr/下载Solr项目文件 在该项目文件中,可以找到我们在本地环境下运行Solr服务器所需要的资源文件,在这里我们以4.10. ...
- [转]支持向量机SVM总结
首先,对于支持向量机(SVM)的简单总结: 1. Maximum Margin Classifier 2. Lagrange Duality 3. Support Vector 4. Kernel 5 ...
- MRC、ARC内存管理机制
MRC下,oc内存管理遵循"谁创建.谁释放.谁引用.谁管理"的机制,当创建或引用一个对象时,需要向她发送alloc,copy,retain消息,当释放该对象时需要发送release ...
- WPF DataGrid Drag
自己实现的功能.代码比较简单的DataGrid的Drag处理,着重处理DataGrid里的拖动排序. using System; using System.Collections.Generic; u ...
- 关于zepto在chrome中触发两次的解决方案
复现条件:chrome 55+ 1.zepto tap的实现及double fire的原因 在监听DOM根节点的时候,touchStart后通过XY的坐标偏差,与tapTime的计时判断Tap/Lon ...
- KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架之koahub
Installation $ npm install koahub Use with koa var app = require('koa')(); var router = require( ...
- 1707: [Usaco2007 Nov]tanning分配防晒霜
1707: [Usaco2007 Nov]tanning分配防晒霜 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 548 Solved: 262[Sub ...