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

那年
  • 73

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

-webkit-transform: translateZ(0);

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

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

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

评论
阅读 1.4k
2 个回答
✓ 已被采纳

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

<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

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

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏