zoukankan      html  css  js  c++  java
  • 移动端fixed的元素抖动的问题

    工作中发现,给一个元素添加fixed属性,让它固定在窗口某个位置,直接加fposition:fixed属性就能实现这个效果;

    在安卓手机上的效果都比较好,但是ios系统的个别浏览器兼容性就不好,如QQ浏览器、UC浏览器、360浏览器(这几个是ios最容易出问题的浏览器);

    问题:当用户快速滑动页面的到时候,fixed的元素就会在窗口跳动或者抖动,非常影响用户体验

    下面提供几个解决方案,仅供参考,如有更好更有效的解决办法,欢迎留言交流探讨!

    方法一:

    给body设置高度100%

    body,html{
        widht:100%;
        height:100%;
    }

    这个方法很有效,但是适用于自己单独开发的页面。

    如果是项目中已经做好的页面,有其他特效,直接设置这个属性,可能对页面的其他功能造成影响。

    如果使用此法,本地调试效果不好,建议不要使用。

    方法二:

    给fixed的元素添加背景定位的属性

    background-attachment:fixed;

    切忌:这个属性不要给有背景图片的元素添加

    这个方法看起来也生效了,由于身边没有测试机的限制,无法测试效果,有条件的朋友可以试一下;

    下面是网络上查到的其他方法,我试过没起作用,列出来供大家参考

    方法三:

    给固定定位的元素添加transform属性

    transform:translateZ(0);或者transform:translate3d(0,0,0);

    我尝试的结果是,这个方法没有起效;

    方法四:

    多加一层盒子,外层fixed固定定位,内层的设置绝对定位absolute;

    还有一种方法说可以用绝对定位模拟固定定位,本人么有模拟出来,网上提供的方法也没有实现这个效果。

     

     

  • 相关阅读:
    perf + 火焰图用法 小结
    忽略多年的地理基本知识
    windows7安装docker异常:looks like something went wrong in step ‘looking for vboxmanage.exe’
    我的选择
    CSS3 width的min/max-content、fill-available以及fit-content
    Redis入门与命令汇总
    javascript中的原型详解
    Promise实现及原理
    nodejs中的垃圾回收
    javascript中的闭包
  • 原文地址:https://www.cnblogs.com/qiujianmei/p/7544989.html
Copyright © 2011-2022 走看看