当前位置: 首页 > news >正文

Vue向上滚动加载数据时防止内容闪动

目前的需求:当前组件向上滚动加载数据,dom加载完后,页面的元素位置不能发生变化

遇到的问题:加载完数据后,又把滚轮滚到之前记录的位置时,内容发生闪动

现在的方案:

加载数据之前记录整体滚动条的高度,数据加载完之后把滚动条滚动到之前数据所在的位置;

方案是没有问题,但是特别不友好!dom加载完了之后滚动还是在最上方,页面就会出现内容的变化(显示新加载出来的数据),这时候再滚动到之前元素的位置还会再次出现内容的变化,(这里我尝试过禁用滚轮事件,但是内容撑开后滚轮还是会变)

重点来了!

这时候就需要使用到 requestAnimationFrame API, 这个API是跟着浏览器的刷新频率来计算的,大概就是一秒60次,它会在下一次渲染之前进行回调

举例说明:刷新之前滚轮高度是500,刷新完dom之后是1200

->>>>>>开始滚动获取数据

->>>>>>开始滚动条高度记录500

->>>>>>获取完数据更新完dom(此时浏览器还没有渲染,但是滚动条高度是1200)

->>>>>>执行requestAnimationFrame回调,把滚动条滚动到刷新之前元素的位置 1200 - 500

->>>>>>渲染

这时候就可以做到很平滑的加载数据!!!!

http://www.lryc.cn/news/463344.html

相关文章:

  • 基于QT、ARM的智能停车管理系统+高分项目+源码
  • 1.6,unity动画Animator屏蔽某个部位,动画组合
  • 发动机冷却系统排空气
  • 三周精通FastAPI:1 第一步入门
  • RestTemplate基本使用之HTTP实现GET请求和POST请求
  • 2024-10-18 问AI: [AI面试题] 神经网络有哪些不同类型?
  • 【开源免费】基于SpringBoot+Vue.JS课程作业管理系统(JAVA毕业设计)
  • jmeter中对于有中文内容的csv文件怎么保存
  • Leetcode 921 Shortest Path in Binary Matrix
  • 第二十二篇——菲欧几何:相对论的数学基础是什么?
  • 【AI整合包及教程】EchoMimic:开创数字人新时代,让静态图像“活”起来!
  • ArcGIS 最新底图服务地址
  • 【服务器部署】Docker部署小程序
  • 三菱FX PLC设计一个电子钟程序实例
  • 妇女、商业与法律(WBL)(1971-2023年)
  • python 卸载、安装、virtualenv
  • ubuntu24.0离线安装Ollama和纯cpu版本以及对接Spring AI
  • 机器学习核心:监督学习与无监督学习
  • 服务器托管的优缺点有哪些?
  • RestClient查询文档排序、分页和高亮
  • API项目5:申请签名 在线调用接口
  • Google FabricDiffusion:开启3D虚拟试穿新篇章
  • 【开发语言】c++的发展前景
  • 【机器学习】图像识别——计算机视觉在工业自动化中的应用
  • lstm基础知识
  • Linux :at crontab简述
  • Python,Swift,Haskell三种语言在使用正则表达式上的方法对比
  • leetcode力扣刷题系列——【三角形的最大高度】
  • 工业相机解决方案
  • 设计一个高效的日志分析系统:自动检测错误日志的实用指南