移动端web开发之坑--ios下的fixed问题

话说前几天接到了一个改bug的任务:
【问题】ios用户进入页面时底部悬浮按钮不显示,需要向下滑动,停止滑动后才会显示。


【先说一下项目的结构吧】
main.html
scripts
– stat.js
– main.js


①由于底部按钮是通过平台配置的,故html中会生成相应的配置对象,只有会通过js遍历后插入页面节点中;
②stat.js 是一个到达页面底部才会被触发,并且只触发一次的函数(触发后解除事件绑定);
③按钮块fixed定位在底部,且插入后,设置页面最后一个元素的margin-bottom值;
④js引入顺序为stat.js>main.js
【分析】ios下fixed的不兼容问题在页面高度变化(margin-bottom)与stat.js通过页面位置的事件绑定与解绑的过程中显现了出来。
【解决】
方法1:调换包含上述函数的js的引用顺序,使按钮渲染不受stat.js影响 ;
方法2:在底部函数之前,使用.scrollIntoView()方法,使fixed定位的按钮,出现在设备视野中 ;
方法3:为position:fixed的按钮块,添加height值 ;
(解决思路:在底部函数执行之前,fixed块要先存在并放置于正确的位置)


【关于.scrollIntoView()方法,请点击这里】

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值