问答

移动端 fixed定位在ios 出现抖动

作者:admin 2021-09-13 我要评论

网上找的方法添加下面一句没有效果 -webkit-transform: translateZ(0); 下面是我的页面结构:需要的是滚动一定距离 中间的一个部分开始吸顶 对应的界面 安卓手机...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

网上找的方法添加下面一句没有效果

-webkit-transform: translateZ(0);

下面是我的页面结构:需要的是滚动一定距离 中间的一个部分开始吸顶image.png
对应的界面
image.png

安卓手机好好的,但是在ios就会抖动

请问有什么方法能解决,急

###

困扰终于解决了 , 网上方法试个遍,最后的解决方法是。
我将需要吸顶的部分 放置在页面的最顶部,也就是放在最外的盒子平级

<div class="content">
    <van-nav-bar title="赛事风云榜" class="title-class" :fixed='true' />
    <van-sticky v-show="isFixed">
      需要吸顶的内容
    </van-sticky>

但是我的吸顶上面还有一段距离,然后在吸顶,所以我就使用
window.addEventListener('scroll', this.handleScroll, true) 在mounted 钩子函数进行监听的。(这里注意如果父元素使用了ocerflow:auto或者scroll的时候 监听的滚动距离就一直是0,注释掉就可以了)

 handleScroll () {
      var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      console.log(scroll);
      if (scroll >= 201) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }

    },

使用isFixed 来控制页面的元素是否隐藏
最后看下我的页面结构
image.png

image.png

###

尝试不用这个组件,自己用粘性布局写。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 移动端 fixed定位在ios 出现抖动

    移动端 fixed定位在ios 出现抖动

  • 有Vue-Xmind 吗? 可以预览编辑,支持远

    有Vue-Xmind 吗? 可以预览编辑,支持远

  • 如何获取同一WiFi下的所有连接设备,并

    如何获取同一WiFi下的所有连接设备,并

  • 评论是按照点赞数排序的,加载更多时,

    评论是按照点赞数排序的,加载更多时,

腾讯云代理商
海外云服务器