vue监听滚动条事件
代码
...省略...mounted() {// 监听页面滚动事件window.addEventListener("scroll", this.scrolling);},
methods: {scrolling() {// 滚动条距文档顶部的距离let scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;// 滚动条滚动的距离let scrollStep = scrollTop - this.oldScrollTop;console.log("header 滚动距离 ", scrollTop);// 更新——滚动前,滚动条距文档顶部的距离this.oldScrollTop = scrollTop;//变量windowHeight是可视区的高度let windowHeight =document.documentElement.clientHeight || document.body.clientHeight;//变量scrollHeight是滚动条的总高度let scrollHeight =document.documentElement.scrollHeight || document.body.scrollHeight;//滚动条到底部的条件if (scrollTop + windowHeight == scrollHeight) {//你想做的事情console.log("header 你已经到底部了");}if (scrollStep < 0) {console.log("header 滚动条向上滚动了!");} else {console.log("header 滚动条向下滚动了!");}// 判断是否到了最顶部if (scrollTop <= 0) {console.log("header 到了最顶部")} },},beforeDestroy() {window.removeEventListener("scroll", this.scrolling);},...省略 ...
效果
vue监听滚动条事件相关推荐
- Vue监听滚动条事件 点击回到顶部
Vue监听滚动条事件 点击回到顶部 监听滚顶条事件: created () {this.listenerFunction(); }, beforeDestroy () {document.remove ...
- vue:监听滚动条事件
由于某些原因,我不得不手工用ant design vue的a-row和a-col拼凑了一个表格,好不容易添加了水平滚动条,然后发现只要拖动滚动条,左表头未设置右边框的问题就被暴露了(为什么没有设置右边 ...
- vue @scroll 监听滚动条事件
vue @scroll 监听滚动条事件 为啥要使用 @scroll 监听滚动条事件 没用在vue.js 开发前 我们监听滚动条事件都是在window挂监听事件 例如:window.onscroll = ...
- Vue全局监听滚动条事件
项目需求滚动条大于200时候,头部固定定位,小于的时候相对定位,监听滚动条事件: // 全局监听,写在App.vue里面methods: {handleScroll(){let scrollTop = ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en">& ...
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
vue监听滚动事件 实现某元素吸顶或者固定位置显示 最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 ...
- html页面滚动条监听事件,jquery如何监听滚动条事件?
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
- JS 监听滚动条事件
JS 监听滚动条事件 获取滚动条位置代码 监听滚动条方法 效果 获取滚动条位置代码 /** * 获取滚动条位置 */ function getScrollTop() {var scrollPos;if ...
- html监听页面滚动高度,jquery如何监听滚动条事件?
jquery如何监听滚动条事件?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 问题: 在浏览很多网页中都会发现,当滚动条滚动到一定的位置的时候就出显示一 ...
最新文章
- golang exec cmd pipeline zombile 进程
- slice_input_producer在2.0版本里怎么用_微信提醒对方账号异常应该怎么办
- 是人是谁_谁是白鹤滩最可爱的人
- ASP.NET自定义服务器控件
- JavaWeb:XML
- AI初学者用什么软件?适合AI新手的9款人工智能开源软件
- [SPOJ CIRU]The area of the union of circles(自适应Simpson积分求圆并面积)
- SWFObject Flash 增强插件
- impala hive随机抽样方法
- Apache Tomcat 文件包含漏洞(CNVD-2020-10487)修复方法
- 99刀299刀 开发者账户 区别
- 微信支付详细教程实战
- 梦境历险记-解说动漫电影
- 计算机操作系统与生态系统
- 2022年3月15日黑马第三天
- 使用U盘制做CentOS7.6安装盘并安装CentOS7.6系统
- Rxjava+retrofit+okHttp+mvp网络请求数据
- 操作系统之短作业优先实现代码
- iPad最值得期待的切实改进构想
- Unity 曲线和弹力算法