https://blog.csdn.net/wang1006008051/article/details/78003974

1、监听滚动事件

利用VUE写一个在控制台打印当前的scrollTop,

首先,在mounted钩子中给window添加一个滚动滚动监听事件,

mounted () {
window.addEventListener('scroll', this.handleScroll)
},

然后在方法中,添加这个handleScroll方法

handleScroll () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
console.log(scrollTop)
},

vue监听滚动事件 实现某元素吸顶或者固定位置显示的更多相关文章

  1. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

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

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

  3. vue监听滚动事件

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

  4. Vue 爬坑之路(七)—— 监听滚动事件 实现动态锚点

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

  5. VUE 实现监听滚动事件,实现数据懒加载

    methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...

  6. vue2.0 添加监听滚动事件

    export default { data () { return { isFixed: true } }, mounted () { window.addEventListener('scroll' ...

  7. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  8. Vue跨路由触发事件,Vue监听sessionStorage

    近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...

  9. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

随机推荐

  1. MVC的ViewData自动给Razor写的input赋值

    问题: 写编辑的时候,突然发现,没有值的model,突然出现了值,而且值是ViewData中值. 后台: this.ViewData["test"] = "测试" ...

  2. css动画 aniamtion & @keyframes

    MDN-animation文档 animation: [name] [duration] [timing-function] [delay] [iteration-cont] [direction] ...

  3. ado.net EF学习系列----深入理解查询延迟加载技术(转载)

    ado.net EF是微软的一个ORM框架,使用过EF的同学都知道EF有一个延迟加载的技术. 如果你是一个老鸟,你可能了解一些,如果下面的学习过程中哪些方面讲解的不对,欢迎批评指教.如果一个菜鸟,那我 ...

  4. CH 1601 - 前缀统计 - [字典树模板题]

    题目链接:传送门 描述给定 $N$ 个字符串 $S_1,S_2,\cdots,S_N$,接下来进行 $M$ 次询问,每次询问给定一个字符串 $T$,求 $S_1 \sim S_N$ 中有多少个字符串是 ...

  5. flex-shrink (适用于弹性盒模型容器子元素)

    设置或检索弹性盒的收缩比率(根据弹性盒子元素所设置的收缩因子作为比率来收缩空间.) 语法 flex-shrink: <number> (default 1) flex-shrink的默认值 ...

  6. python与pip安装

    # Install pip for 2.7 and then python 2.7 itself sudo apt install python-pip sudo apt install python ...

  7. readonly enable

    <input type="text" id="UserName" style="width:20%;" disabled=" ...

  8. JAVA中的array是通过线性表还是链表实现的呢?

    由于高级程序设计语言中的数组类型也有随机存取的特性,因此,通常都用数组来描述数据结构中的顺序存储结构.

  9. PHP之Boolean

    Boolean布尔类型 这是最简单的类型.Boolean表达了真值,可以为true或者false. 语法 要指定一个布尔值,使用常量true或者false,两个都不区分大小写. 通常运算符所返回的Bo ...

  10. End-to-end and Hop-by-hop Headers ---nginx-websocket

    https://www.oschina.net/translate/websocket-nginx 13.5.1 End-to-end and Hop-by-hop Headers For the p ...