最近在开发一个移动页面，页面有一个类似于智能助理的小图标，需要始终悬浮在右下角，然后很开心的给这个小图标所在的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;
}这样就可以完美解决上面抖动的问题啦，亲测有效。
1453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
