需求:  页面滚动 隐藏某元素, 页面停止滚动再显示
 
1. 方法一:利用vue中的watch(侦听器)实现了这一功能,今天就以垂直滚动为例,分享一下实现方法。代码如下:
  1. export default {
  2. data() {
  3. return {
  4. oldScrollTop: 0, //记录上一次滚动结束后的滚动距离
  5. scrollTop: 0 // 记录当前的滚动距离
  6. }
  7. },
  8. watch: {
  9. scrollTop(newValue, oldValue) {
  10. setTimeout(() => {
  11. if(newValue == window.scrollY) { //延时执行后当newValue等于window.scrollY,代表滚动结束
  12. console.log('滚动结束');
  13. this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
  14. };
  15. }, 20); //必须使用延时器,否则每次newValue和window.scrollY都相等,无法判断,20ms刚好大于watch的侦听周期,故延时20ms
  16. if(this.oldScrollTop == oldValue) { //每次滚动开始时oldScrollTop与oldValue相等
  17. console.log('滚动开始');
  18. }
  19. }
  20. },
  21. methods: {
  22. handleScroll() {
  23. window.addEventListener('scroll', () => {
  24. this.scrollTop = window.scrollY;
  25. })
  26. }
  27. },
  28. mounted() {
  29. this.handleScroll();
  30. },
  31. beforeDestroy() {
  32. window.removeEventListener('scroll'); //离开当前组件别忘记移除事件监听哦
  33. }
  34. }

2. 方法二:原生js  判断滚动结束代码如下:

  1. let m1 = 0; // 滚动的值
  2. let m2 = 0; // 对比时间的值
  3. let timer = null;
  4.  
  5. document.onscroll = function(){
  6. clearTimeout(timer) // 每次滚动前 清除一次
  7. timer = setTimeout("Data()", 1000);
  8. m1 = document.documentElement.scrollTop || document.body.scrollTop;
  9.  
  10. }
  11. function Data(){
  12. m2 = document.documentElement.scrollTop || document.body.scrollTop;
  13. if(m2 == m1){
  14. console.log('滚动结束了')
  15. }
  16. }

vue中判断页面滚动开始和结束的更多相关文章

  1. vue 中判断向上滚动还是向下滚动

    <script> export default { data(){ return{ i = 0 } }, mounted () { window.addEventListener('scr ...

  2. vue 中判断页面滑动方向

  3. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  4. vue中的页面渲染方案

    一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...

  5. vue中嵌套页面 iframe 标签

    vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...

  6. vue中嵌套页面(iframe)

    vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...

  7. vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  8. 【MFC】转:在CHtmlView中判断页面加载完成

    在列出别人的代码前,记录下自己的,覆盖父类的OnNavigateComplete2函数即可. typedef struct _tagEventURL { CString strUrl; HANDLE ...

  9. js微信禁用右上角的分享按钮,和vue中微信页面禁用右上角的分享按钮的问题

    1.隐藏微信网页右上角的按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过下面这个 ...

随机推荐

  1. 目标检测常用库MMCV安装中遇到的问题总结

    我看很多教程说mmcv是只支持linux,支持windows版本较少,所以很难和torch.cuda匹配上,所以报错较多难安装.今天试了一下,遇到的和想到的报错问题基本如下: 一.首先是Microso ...

  2. laravel8安装步骤

    网址: https://learnku.com/docs/laravel/8.x/installation/9354 安装: # 安装laravel composer create-project - ...

  3. ElasticSearch安装 --- windows版

    文件下载地址: 链接:https://pan.baidu.com/s/1_Cy_Sy1-vOvsUxliM-EZHQ 提取码:qpcv 定义: Elasticsearch 是一个分布式的搜索和分析引擎 ...

  4. ArcMap从建库到出图

    1前言 本篇博主将介绍关于ArcMap建库.数据采集.拓扑检查.图表.制作符号等的基本操作. 2问题阐述 (1)检查现有block(线要素)图层,保证所有要素闭合,并将其转换为parcel(面要素): ...

  5. 洛谷P1162—填涂颜色

    这应该是是第一次记录洛谷题库里的题目吧: 题目描述 由数字00组成的方阵中,有一任意形状闭合圈,闭合圈由数字11构成,围圈时只走上下左右44个方向.现要求把闭合圈内的所有空间都填写成22.例如:6 \ ...

  6. 软路由openwrt中替换国内镜像源(以阿里云为例)

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 一.打开openwrt终端 二.找到distfeeds.conf 进入opkg cd /etc/opkg 查看opkg内文件 ls 可以找到di ...

  7. 使用 Mosh 来优化 SSH 连接

    1.什么是Mosh Mosh表示移动Shell(Mobile Shell),是一个用于从客户端跨互联网连接远程服务器的命令行工具.它能用于SSH连接,但是比Secure Shell功能更多.它是一个类 ...

  8. CF1500D Tiles for Bathroom (递推+大讨论)

    题目大意:给你一个n*n的矩阵,现在问对于每个k\le n,求出所有k*k的子矩阵中,元素种类数不超过q的矩阵个数,n\le 1500, q\le 10 先考虑最暴力的做法: 对于每个格子,求出以它为 ...

  9. 在Windows环境下构建Lua 入门

    在Windows环境下构建Lua 一:准备软件 1.C-compiler(TDM GCC)  http://tdm-gcc.tdragon.net/download 2.Lua源代码  http:// ...

  10. MAVEN setting文件

    <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...