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

H5页面兼容offsetTop

      在制作H5页面时,有些定位的需求,页面中使用一些动画,导致ios与Android在计算特定位置的时候与顶部距离的计算存在偏差,需要做统一配置。

        思路:从需要计算的元素,一级级往上寻找,直到最上层元素,然后累加offset高度;

        code:

getAllOffsetTop(el,topId) {
   let offsetTop = el.offsetTop;
   if(el.id==topId){
       return 0;
   }
   if (el.offsetParent) {
       offsetTop += getAllOffsetTop(el.offsetParent);
   }
   return offsetTop;
},

 传入需要定位的元素以及顶层元素id即可。

注意点:这里的累加,可能会因为中间出现的margin造成偏差,需要做修复。


http://www.kler.cn/a/273637.html

相关文章:

  • 嵌入式入门Day38
  • 深度学习|表示学习|一个神经元可以干什么|02
  • 《机器学习》——支持向量机(SVM)
  • 6 分布式限流框架
  • C#Halcon找线封装
  • G-Star Landscape 2.0 重磅发布,助力开源生态再升级
  • uniapp+vue3+setup语法糖开发微信小程序时不能定义globalData的解决方法
  • vue3 计算属性(computed)和监听属性(watch)的异同
  • 租一个阿里云的服务器多少钱?30元、61元、99元、165元、199元
  • 机器学习复习(9)——自定义dataset
  • Linux 文件系统:文件描述符、管理文件
  • vue3.x 使用jsplumb进行多列拖拽连线
  • C++ cin标准输入流,及获取多个输入的方法
  • Springboot整合支付宝沙箱支付
  • 移动云COCA架构实现算力跃升,探索人工智能新未来
  • 【C语言】空心正方形图案
  • 【开发】SpringBoot 整合 Redis
  • 自然辩证法
  • bootstrap表格API文档
  • 【Linux】用三种广义进程状态 来理解Linux的进程状态(12)
  • GPT-SoVITS语音合成服务器部署,可远程访问(全部代码和详细部署步骤)
  • 海康、新华三、银江股份、大华等知名企业集结亮相“杭州安防展”
  • 杂记8---多线激光雷达与相机外参标定
  • java项目打包(maven+原生)
  • LeetCode108 将有序数组转换为二叉搜索树
  • 云原生(四)、Docker-Compose