最近在开发一个移动页面,页面有一个类似于智能助理的小图标,需要始终悬浮在右下角,然后很开心的给这个小图标所在的div添加了如下样式,在模拟器中运行OK,Android上也运行没有问题。
#ai-assistant{ width:30px; height:30px; position:fixed; right:10px; bottom:10px; }
但是在IOS中却出现当滑动列表的时候,小图标跟随滑动,然后等滑动停止,小图标才复位到正确位置。
上网找了下,发现IOS对于fixed属性都会存在抖动的问题,有人建议用isrcoll,但是为了一个小图标又不想引用外部框架,所以找到了另一种解决方案。在说解决方案之前,我们先来看看简版的页面结构,这样有助于理解后续的方法。
<html> <body> <div id="wrapper" data-role="page" > <header>我是头部</header> <div id="main-content"> <ul> <li>我是中间的列表数据</li> <li>我是中间的列表数据</li> <li>我是中间的列表数据</li> <li>我是中间的列表数据</li> <li>我是中间的列表数据</li> </ul> </div> <footer>我是尾部</footer> <div id="ai-assistant"> <img src="./images/ai-icons.svg" alt="ai assistant"> </div> </div> </body> </html>
假设你的页面结构是上面的样子,这时候我们可以修改样式如下,给父类#wrapper添加fixed属性,然后ai-assistant使用absolute定位,具体的CSS代码如下:
#wrapper { position:fixed; } #ai-assistant{ width:30px; height:30px; position:absolute; right:10px; bottom:10px; }
这样就可以完美解决上面抖动的问题啦,亲测有效。