移动端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()方法,请点击这里】

你可能感兴趣的:(前端,移动开发,ios,fixed)